update

src/components/ProductSuggestion/index.js

@@ -1,28 +1,99 @@
-import React from "react";
+import React, { useState } from "react";
 
 import productImg from "./product-chair.svg";
+import plus from "./plus.svg";
+
+const ProductSuggestion = ({ suggestions }) => {
+  const [selectedProduct, setSelectedProduct] = useState(null);
 
-const ProductSuggestion = () => {
   return (
-    <section className="m-10">
+    <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
       <h2 className="text-center text-lg font-bold text-productPrice">
         این کالاها برای خرید به شما پیشنهام می دهیم
       </h2>
-      <div className="flex justify-center mt-7">
-        {/* <div>+</div> */}
-        <div className="flex flex-col items-center border rounded border-gray-200 bg-white p-4">
-          <img src={productImg} alt="" className="w-full h-full" />
+      {/* product design */}
+      <div className="flex flex-row flex-wrap justify-center items-center mt-20">
+        {suggestions.map((suggestion, index) => (
+          <div className="flex flex-row mb-7" key={index}>
+            <img src={suggestion.plusIcon} alt="" className="mx-4" />
+            <div
+              className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer
+               ${selectedProduct === suggestion ? "bg-white" : ""}`}
+              onClick={() => setSelectedProduct(suggestion)}
+            >
+              <img
+                src={suggestion.productImage}
+                alt=""
+                className="w-full h-full"
+              />
               <h2 className="my-3 text-sm text-productPrice">
-            لپ تاپ گیمینگ ایسوس
+                {suggestion.productTitle}
               </h2>
-          <p className="text-xs">
-            945/000
-            <span className="mr-2">تومان</span>
+              <p className="text-sm text-lightBlueTextColor">
+                {suggestion.productPrice}
+                <span className="mr-1 text-xs text-black">تومان</span>
               </p>
+              <div className="flex flex-col items-center mt-3">
+                <span className="text-xs">انتخاب شما</span>
+                <input
+                  className="checkbox-input-checked mt-4 cursor-pointer w-4 h-4"
+                  type="checkbox"
+                />
+              </div>
+            </div>
           </div>
+        ))}
+      </div>
+      {/* bottom */}
+      <div className="flex flex-col justify-center items-center mt-10">
+        <div className="flex flex-row mb-5">
+          <p className="text-base text-productPrice font-bold">
+            جمع لوازم اختیاری خریداری شده
+            <span> 56/894/400 </span>
+            تومان
+          </p>
+          <span className="text-lightBlueTextColor text-base mr-1 font-bold">
+            1 کالا
+          </span>
+        </div>
+        <p className="text-sm font-light mb-2 text-gray-600">
+          در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
+        </p>
+        <button className="my-2 text-white rounded bg-blueBgColor p-2 text-sm">
+          اضافه کردن 1 مورد به سبد خرید
+        </button>
       </div>
     </section>
   );
 };
 
 export default ProductSuggestion;
+
+ProductSuggestion.defaultProps = {
+  suggestions: [
+    {
+      productImage: productImg,
+      productTitle: "لپ تاپ گیمینگ ایسوس",
+      productPrice: "750000",
+      plusIcon: null,
+    },
+    {
+      productImage: productImg,
+      productTitle: "مانیتور 40 اینچ",
+      productPrice: "3.000.000",
+      plusIcon: plus,
+    },
+    {
+      productImage: productImg,
+      productTitle: "ماوس گیمینگ",
+      productPrice: "650/000",
+      plusIcon: plus,
+    },
+    {
+      productImage: productImg,
+      productTitle: "لپ تاپ مک بوک پرو 2022",
+      productPrice: "2000",
+      plusIcon: plus,
+    },
+  ],
+};

src/components/ProductSuggestion/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="58" viewBox="0 0 29 58">
+  <text id="_" data-name="+" transform="translate(29 47)" fill="#132f52" font-size="44" font-family="SegoeUI-Light, Segoe UI" font-weight="300"><tspan x="-28.596" y="0">+</tspan></text>
+</svg>