update

src/components/ProductSuggestion/index.js

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import productImg from "./product-chair.svg";
 import plus from "./plus.svg";
 
-const ProductSuggestion = ({ suggestions }) => {
+const ProductSuggestion = ({ suggestions, selected }) => {
   const [selectedProduct, setSelectedProduct] = useState(null);
 
   return (
@@ -14,7 +14,7 @@ const ProductSuggestion = ({ suggestions }) => {
       {/* 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}>
+          <div className="flex flex-col sm: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
@@ -34,9 +34,11 @@ const ProductSuggestion = ({ suggestions }) => {
                 <span className="mr-1 text-xs text-black">تومان</span>
               </p>
               <div className="flex flex-col items-center mt-3">
-                <span className="text-xs">انتخاب شما</span>
+                {suggestion.selected && (
+                  <span className="text-xs">انتخاب شما</span>
+                )}
                 <input
-                  className="checkbox-input-checked mt-4 cursor-pointer w-4 h-4"
+                  className="checkbox-input mt-4 cursor-pointer w-4 h-4"
                   type="checkbox"
                 />
               </div>
@@ -47,16 +49,16 @@ const ProductSuggestion = ({ suggestions }) => {
       {/* 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">
+          <p className="text-sm sm:text-base text-productPrice font-bold">
             جمع لوازم اختیاری خریداری شده
             <span> 56/894/400 </span>
             تومان
           </p>
-          <span className="text-lightBlueTextColor text-base mr-1 font-bold">
+          <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-bold">
             1 کالا
           </span>
         </div>
-        <p className="text-sm font-light mb-2 text-gray-600">
+        <p className="text-xs sm:text-sm font-light mb-2 text-gray-600">
           در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
         </p>
         <button className="my-2 text-white rounded bg-blueBgColor p-2 text-sm">
@@ -76,24 +78,28 @@ ProductSuggestion.defaultProps = {
       productTitle: "لپ تاپ گیمینگ ایسوس",
       productPrice: "750000",
       plusIcon: null,
+      selected: true,
     },
     {
       productImage: productImg,
       productTitle: "مانیتور 40 اینچ",
       productPrice: "3.000.000",
       plusIcon: plus,
+      selected: false,
     },
     {
       productImage: productImg,
       productTitle: "ماوس گیمینگ",
       productPrice: "650/000",
       plusIcon: plus,
+      selected: false,
     },
     {
       productImage: productImg,
       productTitle: "لپ تاپ مک بوک پرو 2022",
       productPrice: "2000",
       plusIcon: plus,
+      selected: false,
     },
   ],
 };