[#2] feat: edit ProductItem component according to hover event

Author: damla

client/src/components/ProductTable/ProductItem/index.jsx

@@ -1,28 +1,51 @@
+import { useState } from "react";
 import ImageBox from "../../ImageBox";
 import styles from "./styles.module.scss";
+import cn from "classnames";
+import AddButton from "../../AddButton";
 
 export default function ProductItem() {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const onMouseEnter = () => setIsHovered(true);
+  const onMouseLeave = () => setIsHovered(false);
   return (
-    <div className={styles.Container}>
-      <ImageBox productImg />
-      <div className={styles.Content}>
-        <div className={styles.Name}>
-          Apple iPhone 11 Pro Maxi Phone 11 Pro Max iPhone 11 (Max 2 Line)...
-        </div>
-        <div className={styles.Variant}>
-          <label>Marka:&nbsp;</label>
-          <span className={styles.Name}>Apple</span>
-        </div>
-        <div className={styles.Variant}>
-          <label>Renk:&nbsp;</label>
-          <span className={styles.Name}>Siyah</span>
-        </div>
-        <span className={styles.Price}>90,85 TL</span>
-        <div className={styles.DiscountContainer}>
-          <span className={styles.DiscountedPrice}>124,00 TL</span>
-          <span className={styles.Discount}>12%</span>
-        </div>
-      </div>
+    <div
+      className={cn(styles.Container, isHovered && styles.Stroke)}
+      onMouseEnter={() => onMouseEnter()}
+      onMouseLeave={() => onMouseLeave()}
+    >
+      {!isHovered ? (
+        <>
+          <ImageBox productImg />
+          <div className={styles.Content}>
+            <div className={styles.Name}>iPhone 11 Kırmızı Kılıf</div>
+            <div>
+              <div className={styles.Variant}>
+                <label>Marka:&nbsp;</label>
+                <span className={styles.Name}>Apple</span>
+              </div>
+              <div className={styles.Variant}>
+                <label>Renk:&nbsp;</label>
+                <span className={styles.Name}>Siyah</span>
+              </div>
+            </div>
+            <span className={styles.Price}>90,85 TL</span>
+            <div className={styles.DiscountContainer}>
+              <span className={styles.DiscountedPrice}>124,00 TL</span>
+              <span className={styles.Discount}>12%</span>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <ImageBox productImg isHovered />
+          <div className={cn(styles.Content, styles.Hover)}>
+            <div className={styles.Name}>iPhone 11 Kırmızı Kılıf</div>
+            <AddButton />
+          </div>
+        </>
+      )}
     </div>
   );
 }

client/src/components/ProductTable/ProductItem/styles.module.scss

@@ -9,21 +9,27 @@
   max-height: 100%;
   height: 100%;
 
+  &.Stroke {
+    border: 1px solid vars.$stroke-border-color;
+    border-radius: 4px;
+  }
+
   .Content {
     display: flex;
     width: 230px;
     max-width: 230px;
+    height: 130px;
+    max-height: 130px;
     align-items: flex-start;
     flex-direction: column;
+    justify-content: space-between;
 
     .Name {
-      font-family: Roboto;
+      padding-top: 9px;
       font-style: normal;
       font-weight: normal;
       font-size: 12px;
       line-height: 18px;
-      margin-top: 9px;
-      margin-bottom: 10px;
     }
 
     .Variant {
@@ -33,8 +39,6 @@
       font-size: 12px;
       line-height: 18px;
       color: vars.$primary-font-color;
-      // .Label {
-      // }
 
       .Name {
         font-weight: normal;
@@ -43,7 +47,6 @@
 
     .Price {
       height: 17px;
-      margin-top: 13px;
       font-style: normal;
       font-weight: bold;
       font-size: 14px;

client/src/global/variables.scss

@@ -5,10 +5,12 @@ $brand-color: #ff6000; // logo, linkler vs
 $border-color: #b0b0b0; // buttonlar sepetim
 $sorting-border-color: #b4b4bb; //siralama
 $hover-border-color: $border-color; // ürüne hover edilmesi
+$stroke-border-color: #cdcdcd;
 
 $muted-font-color: $border-color;
 $primary-font-color: #484848; // ana baslik, alt basliklar
 $secondary-font-color: #646464; // linkler
+$deactive-font-color: $border-color; // sepet deactive
 $disabled-font-color: #9b9b9b; // düşülen para
 $highlight-font-color: #f90000; // indirim, sepetten kaldir butonu
 
@@ -19,8 +21,8 @@ $hover-link-color: $brand-color;
 $add-to-cart-btn-bg: rgba(255, 96, 0, 0.11);
 $cart-item-border-color: #e5e5e5;
 $cart-remove-btn-color: $highlight-font-color;
+$cart-remove-deactive-btn-color: rgba(126, 126, 126, 0.11);
 $pagination-btn-color: #eeeeee;
 $search-bg-color: $pagination-btn-color;
 $search-ph-color: $border-color; // search placeholder
 
-$secondary-bg-color: $border-color; // search, deactive button