From 6f66244ff29fc71601d711670d89e60bf8b5a26e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Sj=C3=B6str=C3=B6m?=
<maximiliansjostrom@outlook.com>
Date: Tue, 21 May 2024 13:55:49 +0200
Subject: [PATCH] added beginning of categories page
---
theme-costume-app/src/CategoriesPage.css | 47 ++++++++++++++++--------
theme-costume-app/src/CategoriesPage.js | 18 ++++-----
2 files changed, 39 insertions(+), 26 deletions(-)
diff --git a/theme-costume-app/src/CategoriesPage.css b/theme-costume-app/src/CategoriesPage.css
index 32c5db2..ce9719f 100644
--- a/theme-costume-app/src/CategoriesPage.css
+++ b/theme-costume-app/src/CategoriesPage.css
@@ -1,18 +1,35 @@
-/* CategoriesPage.css */
.categories-container {
- padding: 20px;
+ 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);
}
-
- .categories-title {
- font-size: 24px;
- margin-bottom: 20px;
+ 100% {
+ transform: translateZ(50px);
+ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}
-
- .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
index 95c3f3c..e6cb2de 100644
--- a/theme-costume-app/src/CategoriesPage.js
+++ b/theme-costume-app/src/CategoriesPage.js
@@ -1,28 +1,24 @@
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 style={{ padding: '20px' }}>
- <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Categories</h1>
+ <div className="categories-container">
+ <h1 className="categories-title">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
+ className="category-item"
+ onClick={() => {
window.location.href = category.link;
}}
>
--
GitLab