Merge branch 'categories' into 'main'

Categories

See merge request !4

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

+.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;
+  cursor: pointer; /* Add cursor pointer for better UX */
+  transition: transform 0.4s, box-shadow 0.4s; /* Add transition for smoothness */
+}
+
+/* Add the hover effect */
+.category-item:hover {
+  animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+/* Define the shadow-drop-2-center animation */
+@keyframes shadow-drop-2-center {
+  0% {
+    transform: translateZ(0);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+  100% {
+    transform: translateZ(50px);
+    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+  }
+}

theme-costume-app/src/CategoriesPage.js

+import React from 'react';
+import './CategoriesPage.css'; // Import the CSS file
+
+const categories = [
+  { name: 'Men', link: '/category/men' },
+  { name: 'Women', link: '/category/women' },
+  { name: 'Kids', link: '/category/kids' },
+  { name: 'Accessories', link: '/category/accessories' },
+  { name: 'Sale', link: '/category/sale' },
+];
+
+const CategoriesPage = () => {
+  return (
+    <div className="categories-container">
+      <h1 className="categories-title">Categories</h1>
+      <div>
+        {categories.map((category, index) => (
+          <div 
+            key={index} 
+            className="category-item"
+            onClick={() => { 
+              window.location.href = category.link;
+            }}
+          >
+            {category.name}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CategoriesPage;