Rollback

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.14",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,12 +1,25 @@
 import './App.css';
 import { Routes, Route } from 'react-router-dom';
+import { NavBar } from './components/NavBar';
 import { HomePage } from './pages/HomePage';
+import { KidsPage } from './pages/kids/KidsPage';
+import { MenPage } from './pages/men/MenPage';
+import { SalePage } from './pages/sale/SalePage';
+import { SportPage } from './pages/sport/SportPage';
+import { WomenPage } from './pages/women/WomenPage';
+
 
 function App() {
   return (
     <>
+      <NavBar />
       <Routes>
         <Route element={<HomePage/>} path='/'></Route>
+        <Route element={<KidsPage/>} path='/kids'></Route>
+        <Route element={<MenPage/>} path='/men'></Route>
+        <Route element={<SalePage/>} path='/sale'></Route>
+        <Route element={<SportPage/>} path='/sport'></Route>
+        <Route element={<WomenPage/>} path='/women'></Route>
       </Routes>
     </>
   );

src/components/Breadcrumbs.js

@@ -0,0 +1,30 @@
+import Breadcrumb from 'react-bootstrap/Breadcrumb';
+import {Link} from 'react-router-dom'
+
+export const Breadcrumbs = ({
+    links
+}) => {
+    // Usage Example:
+    // <Breadcrumbs 
+    //    links={[
+    //        { name: 'Home', href: '/' },
+    //        { name: 'Category', href: '/category' },
+    //        { name: 'Product', href: '/category/product' }
+    //    ]}
+    // />
+    return (
+        <Breadcrumb>
+            {links.map(({ name, href }, index) => (
+                <Breadcrumb.Item key={index} active={index === links.length - 1}>
+                    {index === links.length - 1 ? (
+                        name
+                    ) : (
+                        <Link to={href} style={{ textDecoration: 'none', color: 'inherit' }}>
+                            {name}
+                        </Link>
+                    )}
+                </Breadcrumb.Item>
+            ))}
+        </Breadcrumb>
+    );
+}

src/components/CustomDropdown.js

@@ -0,0 +1,17 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+
+export const CustomDropdown = () => {
+  return (
+    <Dropdown data-bs-theme="dark">
+      <Dropdown.Toggle variant="secondary" id="dropdown-basic">
+        Sort By
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item>Price Low to High</Dropdown.Item>
+        <Dropdown.Item>Price High to Low</Dropdown.Item>
+        <Dropdown.Item>Newest</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}