init

frontend/src/layouts/LAYOUTS.md

@@ -0,0 +1,69 @@
+# Layouts in React Router
+
+## 📌 What is a Layout?
+A **layout** in React Router is just a **React component** that wraps multiple pages with shared structure or styling (e.g., header, footer, sidebar).
+
+Layouts usually contain:
+- Global UI elements (navigation, footer, etc.)
+- An `<Outlet />` component where nested routes will render their content
+
+---
+
+## 📂 Folder Structure Example
+
+src/  
+layouts/  
+├── MainLayout.jsx  
+└── AdminLayout.jsx  
+pages/  
+├── HomePage.jsx  
+├── AboutPage.jsx  
+└── DashboardPage.jsx  
+
+
+---
+
+## 🛠 How Layouts Are Used in Routes
+
+### 1. Layout as a Parent Route
+Use the layout component as the `element` of a **parent route** and place **pages** inside as nested routes.
+
+```jsx
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import MainLayout from "./layouts/MainLayout";
+import HomePage from "./pages/HomePage";
+import AboutPage from "./pages/AboutPage";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/about" element={<AboutPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
+```
+
+### 2. Inside the MainLayout.jsx
+
+```jsx
+import { Outlet } from "react-router-dom";
+
+export default function MainLayout() {
+  return (
+    <>
+      <header>Header</header>
+      <main>
+        <Outlet />
+      </main>
+      <footer>Footer</footer>
+    </>
+  );
+}
+```