From c50e39c4919d80ec7f2516a942ef6cdced5c2ec3 Mon Sep 17 00:00:00 2001
From: unknown <maxsj462@student.liu.se>
Date: Mon, 20 May 2024 16:21:51 +0200
Subject: [PATCH] start of the categories page made
---
theme-costume-app/src/App.js | 3 ++
theme-costume-app/src/CategoriesPage.css | 18 ++++++++++++
theme-costume-app/src/CategoriesPage.js | 37 ++++++++++++++++++++++++
3 files changed, 58 insertions(+)
create mode 100644 theme-costume-app/src/CategoriesPage.css
create mode 100644 theme-costume-app/src/CategoriesPage.js
diff --git a/theme-costume-app/src/App.js b/theme-costume-app/src/App.js
index 20e0c8a..91b0ba7 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 0000000..32c5db2
--- /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 0000000..95c3f3c
--- /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;
--
GitLab