feature(4): add page

adrienloup · Aug 23, 2024 · 7cf8aa6 · 7cf8aa6
1 parent 0792347
commit 7cf8aa6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/src/pages/Product/Product.module.scss b/src/pages/Product/Product.module.scss
@@ -73,4 +73,11 @@ $mobile-landscape: 1024px;
   font-weight: bold;
   font-size: 1.5rem;
   color: var(--color-2);
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    background-color: var(--color-4);
+    color: var(--color-1);
+  }
 }
diff --git a/src/pages/Product/Product.tsx b/src/pages/Product/Product.tsx
@@ -26,7 +26,7 @@ function ProductPage() {
   const productDispatch = useShoppingCartDispatch();
   const location = useLocation();
 
-  const product = products?.filter(
+  const product = products?.find(
     (product) => product.route === location.pathname.split('/').pop()
   );
 
@@ -41,7 +41,7 @@ function ProductPage() {
     });
   };
 
-  useTitle(product ? product[0].title : 'Product');
+  useTitle(product ? product.title : 'Product');
 
   return (
     <>
@@ -51,41 +51,41 @@ function ProductPage() {
           {loading && <LoaderComponent cssClass={styles.loader} size="large" />}
           {product && (
             <>
-              <TitleComponent>{product[0].title}</TitleComponent>
+              <TitleComponent>{product.title}</TitleComponent>
               <div className={styles.content}>
                 <div className={styles.inner}>
                   <ImageComponent
                     cssClass={styles.image}
-                    src={`/one/data/products/${product[0].image}`}
-                    alt={product[0].title}
+                    src={`/one/data/products/${product.image}`}
+                    alt={product.title}
                   />
                   <div className={styles.collection}>
-                    {product[0].collection} collection
+                    {product.collection} collection
                   </div>
                   <div className={styles.price}>
-                    {product[0].discount > 0 ? (
+                    {product.discount > 0 ? (
                       <>
                         <span className={styles.sales}>
-                          ${product[0].price.toFixed(2)}
+                          ${product.price.toFixed(2)}
                         </span>
-                        {` $${((product[0].price * product[0].discount) / 100).toFixed(2)} `}
+                        {` $${((product.price * product.discount) / 100).toFixed(2)} `}
                         <span className={styles.discount}>
-                          {product[0].discount}%
+                          {product.discount}%
                         </span>
                       </>
                     ) : (
-                      `$${product[0].price.toFixed(2)}`
+                      `$${product.price.toFixed(2)}`
                     )}
                   </div>
-                  <div className={styles.short}>{product[0].short}</div>
+                  <div className={styles.short}>{product.short}</div>
                   <div className={styles.description}>
-                    {product[0].description.map((text, index) => (
+                    {product.description.map((text, index) => (
                       <p key={index}>{text}</p>
                     ))}
                   </div>
                   <ButtonComponent
                     cssClass={styles.button}
-                    onClick={() => onClick(product[0])}
+                    onClick={() => onClick(product)}
                   >
                     Add to shopping cart
                   </ButtonComponent>

diff --git a/src/pages/ShoppingCart/ShoppingCart.module.scss b/src/pages/ShoppingCart/ShoppingCart.module.scss
@@ -74,6 +74,13 @@ $mobile-portrait: 768px;
   background-color: var(--color-5);
   font-size: 1.75rem;
   color: var(--color-2);
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    background-color: var(--color-4);
+    color: var(--color-1);
+  }
 }
 
 .sales {
@@ -105,4 +112,11 @@ $mobile-portrait: 768px;
   font-weight: bold;
   font-size: 1.5rem;
   color: var(--color-2);
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    background-color: var(--color-4);
+    color: var(--color-1);
+  }
 }