Skip to content

Commit 802baef

Browse files
jxrgelfajxrgelfa
authored
Merge pull request #1 from jxrgelfa/feature/estructura
Estructura Inicial
2 parents 8cdfe07 + 664bd12 commit 802baef

3 files changed

Lines changed: 581 additions & 0 deletions

File tree

‎src/App.jsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";
2+
3+
// ─── Layout ───────────────────────────────────────────────────────────────────
4+
5+
function Navbar() {
6+
return (
7+
<header className="bg-black text-white shadow-md">
8+
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
9+
{/* Logo */}
10+
<Link to="/" className="text-xl font-bold tracking-widest uppercase hover:text-gray-300 transition-colors">
11+
SneakerStore
12+
</Link>
13+
14+
{/* Links principales */}
15+
<ul className="flex items-center gap-6 text-sm font-medium">
16+
<li>
17+
<Link to="/" className="hover:text-gray-300 transition-colors">
18+
Inicio
19+
</Link>
20+
</li>
21+
<li>
22+
<Link to="/productos" className="hover:text-gray-300 transition-colors">
23+
Catálogo
24+
</Link>
25+
</li>
26+
<li>
27+
<Link to="/favoritos" className="hover:text-gray-300 transition-colors">
28+
Favoritos
29+
</Link>
30+
</li>
31+
<li>
32+
<Link
33+
to="/admin"
34+
className="bg-white text-black px-4 py-1.5 rounded-full text-xs font-semibold hover:bg-gray-200 transition-colors"
35+
>
36+
Admin
37+
</Link>
38+
</li>
39+
</ul>
40+
</nav>
41+
</header>
42+
);
43+
}
44+
45+
function Footer() {
46+
return (
47+
<footer className="bg-black text-gray-400 text-sm mt-auto">
48+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col sm:flex-row items-center justify-between gap-4">
49+
<p className="font-semibold text-white tracking-widest uppercase">SneakerStore</p>
50+
<p>© {new Date().getFullYear()} SneakerStore. Todos los derechos reservados.</p>
51+
<ul className="flex gap-4">
52+
<li><Link to="/productos" className="hover:text-white transition-colors">Catálogo</Link></li>
53+
<li><Link to="/favoritos" className="hover:text-white transition-colors">Favoritos</Link></li>
54+
<li><Link to="/admin" className="hover:text-white transition-colors">Admin</Link></li>
55+
</ul>
56+
</div>
57+
</footer>
58+
);
59+
}
60+
61+
/**
62+
* Layout raíz: envuelve todas las rutas públicas con Navbar + Footer.
63+
* El <Outlet /> renderiza la vista hija activa.
64+
*/
65+
function RootLayout() {
66+
return (
67+
<div className="flex flex-col min-h-screen bg-gray-50 text-gray-900">
68+
<Navbar />
69+
<main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-10">
70+
<Outlet />
71+
</main>
72+
<Footer />
73+
</div>
74+
);
75+
}
76+
77+
// ─── Placeholders para los compañeros ─────────────────────────────────────────
78+
// TODO: Reemplazar cada <h1> por el componente real cuando esté listo.
79+
80+
const Home = () => <h1 className="text-3xl font-bold">🏠 Home — Vista principal (pendiente)</h1>;
81+
const Catalogo = () => <h1 className="text-3xl font-bold">👟 Catálogo de Productos (pendiente)</h1>;
82+
const DetalleProducto = () => <h1 className="text-3xl font-bold">🔍 Detalle del Producto (pendiente)</h1>;
83+
const Favoritos = () => <h1 className="text-3xl font-bold">❤️ Favoritos (pendiente)</h1>;
84+
const NotFound = () => <h1 className="text-3xl font-bold text-red-500">404 — Página no encontrada</h1>;
85+
86+
// ─── Admin Layout (con Outlet para subrutas) ───────────────────────────────────
87+
88+
function AdminLayout() {
89+
const adminLinks = [
90+
{ to: "nuevo-producto", label: "➕ Nuevo Producto" },
91+
{ to: "pedidos", label: "📦 Pedidos" },
92+
{ to: "marcas", label: "🏷️ Marcas" },
93+
{ to: "usuarios", label: "👤 Usuarios" },
94+
];
95+
96+
return (
97+
<div className="flex gap-8">
98+
{/* Sidebar Admin */}
99+
<aside className="w-52 shrink-0">
100+
<h2 className="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Panel Admin</h2>
101+
<nav className="flex flex-col gap-1">
102+
{adminLinks.map(({ to, label }) => (
103+
<Link
104+
key={to}
105+
to={to}
106+
className="px-3 py-2 rounded-lg text-sm font-medium hover:bg-black hover:text-white transition-colors"
107+
>
108+
{label}
109+
</Link>
110+
))}
111+
</nav>
112+
</aside>
113+
114+
{/* Contenido de la subruta activa */}
115+
<div className="flex-1">
116+
<Outlet />
117+
</div>
118+
</div>
119+
);
120+
}
121+
122+
// Placeholders para las subrutas de admin
123+
// TODO: Reemplazar por los componentes reales de administración.
124+
const AdminHome = () => <h1 className="text-3xl font-bold">🛠️ Panel de Administración (pendiente)</h1>;
125+
const AdminNuevoProducto = () => <h1 className="text-3xl font-bold">➕ Nuevo Producto — Formulario (pendiente)</h1>;
126+
const AdminPedidos = () => <h1 className="text-3xl font-bold">📦 Gestión de Pedidos (pendiente)</h1>;
127+
const AdminMarcas = () => <h1 className="text-3xl font-bold">🏷️ Gestión de Marcas (pendiente)</h1>;
128+
const AdminUsuarios = () => <h1 className="text-3xl font-bold">👤 Gestión de Usuarios (pendiente)</h1>;
129+
130+
// ─── Router principal ──────────────────────────────────────────────────────────
131+
132+
export default function App() {
133+
return (
134+
<BrowserRouter>
135+
<Routes>
136+
{/* Rutas públicas bajo RootLayout */}
137+
<Route element={<RootLayout />}>
138+
<Route index element={<Home />} />
139+
<Route path="productos" element={<Catalogo />} />
140+
<Route path="producto/:id" element={<DetalleProducto />} />
141+
<Route path="favoritos" element={<Favoritos />} />
142+
143+
{/* Rutas de Admin con su propio layout anidado */}
144+
<Route path="admin" element={<AdminLayout />}>
145+
<Route index element={<AdminHome />} />
146+
<Route path="nuevo-producto" element={<AdminNuevoProducto />} />
147+
<Route path="pedidos" element={<AdminPedidos />} />
148+
<Route path="marcas" element={<AdminMarcas />} />
149+
<Route path="usuarios" element={<AdminUsuarios />} />
150+
</Route>
151+
152+
{/* Catch-all 404 */}
153+
<Route path="*" element={<NotFound />} />
154+
</Route>
155+
</Routes>
156+
</BrowserRouter>
157+
);
158+
}

0 commit comments

Comments
 (0)