diff --git a/theme-costume-app/src/App.js b/theme-costume-app/src/App.js index 20e0c8a48a837a1ac181bb4033febc2cc3a1afa9..91b0ba70167b6575dffb08b609f7665cad16dbc2 100644 --- a/theme-costume-app/src/App.js +++ b/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> diff --git a/theme-costume-app/src/CategoriesPage.css b/theme-costume-app/src/CategoriesPage.css new file mode 100644 index 0000000000000000000000000000000000000000..32c5db269155068e1ed3b8099d19372038a3449a --- /dev/null +++ b/theme-costume-app/src/CategoriesPage.css @@ -0,0 +1,18 @@ +/* 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 diff --git a/theme-costume-app/src/CategoriesPage.js b/theme-costume-app/src/CategoriesPage.js new file mode 100644 index 0000000000000000000000000000000000000000..95c3f3c995f1d6f2062f96a90ce061de6f8f9ef4 --- /dev/null +++ b/theme-costume-app/src/CategoriesPage.js @@ -0,0 +1,37 @@ +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;