creando Layout principal

JerlibGnzlz · JerlibGnzlz · commit e7da625a45a6 · 2024-01-14T19:56:36.000-03:00
diff --git a/index.html b/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Crm-React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Crm-React</title>
+	</head>
+	<body class="min-h-screen bg-gray-100">
+		<div id="root"></div>
+		<script type="module" src="/src/main.jsx"></script>
+	</body>
 </html>
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom';
+
+const Layout = () => {
+  return (
+
+    <div className="md:flex md:min-h-screen">
+      <aside className="md:w-1/4 bg-green-900 px-5 py-10">
+        <h2 className='font-bold text-4xl text-center text-white'>CRM-Clientes</h2>
+      </aside>
+
+      <main className="md:w-3/4 p-10 md:h-screen overflow-scroll">
+        <Outlet />
+      </main>
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,21 +1,33 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Layout from './components/Layout';
+import NuevoCliente from './pages/NuevoCliente';
+import Index from './pages/Index';
+
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <h1>Inicio</h1>
+    element: <Layout />,
+    children: [
+      {
+        index: true,
+        element: <Index />
+      },
+      {
+        path: "/clientes/nuevo",
+        element: <NuevoCliente />
+      },
+    ]
+
   },
-  {
-    path: "/nosotros",
-    element: <h1>Nosotros</h1>
-  }
-])
+
+]);
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <RouterProvider router={router} />
   </React.StrictMode>,
-)
+);
diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx
@@ -0,0 +1,8 @@
+
+const Index = () => {
+  return (
+    <div>Inicio</div>
+  );
+};
+
+export default Index;
diff --git a/src/pages/NuevoCliente.jsx b/src/pages/NuevoCliente.jsx
@@ -0,0 +1,8 @@
+
+const NuevoCliente = () => {
+  return (
+    <div>Nuevo  Cliente</div>
+  );
+};
+
+export default NuevoCliente;
