start of the categories page made

theme-costume-app/src/App.js

@@ -5,6 +5,8 @@ import About from './About';
 import Profile from './Profile';
 import Charts from './Charts';
 import ResponsiveAppBar from './components/ResponsiveAppBar';
+import CategoriesPage from './CategoriesPage';
+
 
 function App() {
   const [user, setUser] = useState(null);
@@ -32,6 +34,7 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/news" element={<About />} />
           <Route path="/Topplistan" element={<Charts />} />
+          <Route path="/Categories" element={<CategoriesPage />} />
 
         </Routes>  
       </div>

theme-costume-app/src/CategoriesPage.css

+/* CategoriesPage.css */
+.categories-container {
+    padding: 20px;
+  }
+  
+  .categories-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  .category-item {
+    font-size: 18px;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
\ No newline at end of file

theme-costume-app/src/CategoriesPage.js

+import React from 'react';
+
+const categories = [
+  { name: 'Men', link: '/category/men' },
+  { name: 'Women', link: '/category/women' },
+  { name: 'Kids', link: '/category/kids' },
+];
+
+const CategoriesPage = () => {
+  return (
+    <div style={{ padding: '20px' }}>
+      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Categories</h1>
+      <div>
+        {categories.map((category, index) => (
+          <div 
+            key={index} 
+            style={{ 
+              fontSize: '18px', 
+              padding: '10px', 
+              marginBottom: '10px', 
+              border: '1px solid #ccc', 
+              borderRadius: '4px',
+              cursor: 'pointer' // Add cursor pointer for better UX
+            }}
+            onClick={() => { // Navigate to the category link on click
+              window.location.href = category.link;
+            }}
+          >
+            {category.name}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CategoriesPage;