update 2 files and delete 3 files

src/components/ProductSuggestion/index.js

@@ -1,244 +0,0 @@
-import React, { useState } from "react";
-
-import productImg from "./product-chair.svg";
-import plus from "./plus.svg";
-import Button from "../Button";
-
-const ProductSuggestion = ({ suggestions, selected }) => {
-  const [selectedProduct, setSelectedProduct] = useState([]);
-
-  return (
-    <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
-      <h2 className="text-center text-lg font-sansbold text-productPrice">
-        این کالاها برای خرید به شما پیشنهام می دهیم
-      </h2>
-      {/* product design */}
-      <div className="flex flex-row flex-wrap justify-center items-center mt-20">
-        {suggestions.map((suggestion, 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 transition-all ease-in-out duration-500
-                ${selectedProduct.includes(suggestion) ? "bg-white" : ""}`}
-              // onClick={() => setSelectedProduct(suggestion)}
-              onClick={() =>
-                setSelectedProduct(
-                  selectedProduct.includes(suggestion)
-                    ? selectedProduct.filter((item) => item != suggestion)
-                    : [...selectedProduct, 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-sm text-lightBlueTextColor">
-                {suggestion.productPrice}
-                <span className="mr-1 text-xs text-black">تومان</span>
-              </p>
-              <div className="flex flex-col items-center">
-                {/* {suggestion.selected && (
-                  <span className="text-xs">انتخاب شما</span>
-                )} */}
-                {selectedProduct.includes(suggestion) && (
-                  <span className="text-xs mt-2">انتخاب شما</span>
-                )}
-                <input
-                  // checked={suggestion.selected}
-                  checked={selectedProduct.includes(suggestion)}
-                  onClick={() =>
-                    setSelectedProduct(
-                      selectedProduct.includes(suggestion)
-                        ? selectedProduct.filter((item) => item != suggestion)
-                        : [...selectedProduct, suggestion]
-                    )
-                  }
-                  className="checkbox-input 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-sm sm:text-base text-productPrice font-sansbold">
-            جمع لوازم اختیاری خریداری شده
-            <span> 56/894/400 </span>
-            تومان
-          </p>
-          <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-sansbold">
-            1 کالا
-          </span>
-        </div>
-        <p className="text-xs sm:text-sm font-light mb-2 text-gray-600">
-          در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
-        </p>
-        <Button
-          className={`my-2 text-white rounded bg-blueBgColor px-2 py-2 text-sm`}
-          text={"اضافه کردن 1 مورد به سبد خرید"}
-        />
-      </div>
-    </section>
-  );
-};
-
-export default ProductSuggestion;
-
-ProductSuggestion.defaultProps = {
-  suggestions: [
-    {
-      productImage: productImg,
-      productTitle: "لپ تاپ گیمینگ ایسوس",
-      productPrice: "750000",
-      plusIcon: null,
-      // selected: true,
-    },
-    {
-      productImage: productImg,
-      productTitle: "مانیتور 40 اینچ",
-      productPrice: "3.000.000",
-      plusIcon: plus,
-      // selected: true,
-    },
-    {
-      productImage: productImg,
-      productTitle: "ماوس گیمینگ",
-      productPrice: "650/000",
-      plusIcon: plus,
-      // selected: false,
-    },
-    {
-      productImage: productImg,
-      productTitle: "لپ تاپ مک بوک پرو 2022",
-      productPrice: "2000",
-      plusIcon: plus,
-      // selected: false,
-    },
-  ],
-};
-
-//
-
-//
-// import React, { useState } from "react";
-
-// import productImg from "./product-chair.svg";
-// import plus from "./plus.svg";
-
-// const ProductSuggestion = ({ suggestions, selected }) => {
-//   const [selectedProduct, setSelectedProduct] = useState([]);
-//   const addToSelected = (obj) => {
-//     if (selectedProduct.indexOf(obj) === -1) {
-//       setSelectedProduct(() => [...selectedProduct, obj]);
-//     } else {
-//       setSelectedProduct(() =>
-//         selectedProduct.splice(selectedProduct.indexOf(obj), 1)
-//       );
-//     }
-//   };
-//   return (
-//     <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
-//       <h2 className="text-center text-lg font-sansbold text-productPrice">
-//         این کالاها برای خرید به شما پیشنهام می دهیم
-//       </h2>
-//       {/* product design */}
-//       <div className="flex flex-row flex-wrap justify-center items-center mt-20">
-//         {suggestions.map((suggestion, index) => (
-//           <div
-//             className="flex flex-col sm:flex-row mb-7"
-//             key={index}
-//             onClick={() => setSelectedProduct(suggestion)}
-//           >
-//             <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 transition-all ease-in-out duration-500
-//                 ${selectedProduct === suggestion ? "bg-white" : ""}`}
-//             >
-//               <img
-//                 src={suggestion.productImage}
-//                 alt=""
-//                 className="w-full h-full"
-//               />
-//               <h2 className="my-3 text-sm text-productPrice">
-//                 {suggestion.productTitle}
-//               </h2>
-//               <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">
-//                 {suggestion.selected && (
-//                   <span className="text-xs">انتخاب شما</span>
-//                 )}
-//                 <input
-//                   checked={selectedProduct.indexOf(suggestion) > -1}
-//                   onClick={() => setSelectedProduct(suggestion)}
-//                   className="checkbox-input 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-sm sm:text-base text-productPrice font-sansbold">
-//             جمع لوازم اختیاری خریداری شده
-//             <span> 56/894/400 </span>
-//             تومان
-//           </p>
-//           <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-sansbold">
-//             1 کالا
-//           </span>
-//         </div>
-//         <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">
-//           اضافه کردن 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/ProductSuggestionCard/ProductSuggestion1/index.js

@@ -0,0 +1,156 @@
+import React, { useState } from "react";
+import Button from "../../ButtonDesign/Button";
+
+const ProductSuggestion1 = ({
+  suggestions,
+  cardTitle,
+  totalAmountTitle,
+  totalAmount,
+  selectedItems,
+}) => {
+  const [selectedProduct, setSelectedProduct] = useState([]);
+
+  return (
+    <section className="flex flex-col gap-y-5 p-4  border-2 border-gray-300 rounded-lg">
+      <h2 className="text-center text-lg font-sansbold text-[#132F52]">
+        {cardTitle}
+      </h2>
+      {/* product design */}
+      <div className="flex flex-wrap items-center justify-center gap-y-10">
+        {suggestions.map((suggestion, index) => (
+          <div
+            className="relative flex flex-row mb-7 justify-center"
+            style={{ width: "calc(100% / 4.5)" }}
+            key={index}
+          >
+            <div
+              className={`flex flex-col items-center border rounded-md border-gray-300 p-5 transition-all ease-in-out duration-500 cursor-pointer
+                ${selectedProduct.includes(suggestion) ? "bg-white" : ""}`}
+              // onClick={() => setSelectedProduct(suggestion)}
+              onClick={() =>
+                setSelectedProduct(
+                  selectedProduct.includes(suggestion)
+                    ? selectedProduct.filter((item) => item != suggestion)
+                    : [...selectedProduct, suggestion]
+                )
+              }
+            >
+              <img
+                src={suggestion.productImage}
+                alt="productImage"
+                className="w-full"
+              />
+              <h2 className="my-3 text-sm text-[#132F52]">
+                {suggestion.productTitle}
+              </h2>
+              <p className="text-sm text-[#06BACE]">
+                {suggestion.productPrice}
+                <span className="mr-1 text-xs">تومان</span>
+              </p>
+              <div className="flex flex-col items-center">
+                {/* {suggestion.selected && (
+                  <span className="text-xs">انتخاب شما</span>
+                )} */}
+                {selectedProduct.includes(suggestion) && (
+                  <span className="mt-2 text-xs">انتخاب شما</span>
+                )}
+                <input
+                  // checked={suggestion.selected}
+                  checked={selectedProduct.includes(suggestion)}
+                  onClick={() =>
+                    setSelectedProduct(
+                      selectedProduct.includes(suggestion)
+                        ? selectedProduct.filter((item) => item != suggestion)
+                        : [...selectedProduct, suggestion]
+                    )
+                  }
+                  className="w-4 mt-4 cursor-pointer "
+                  type="checkbox"
+                />
+              </div>
+            </div>
+            {Number(index) !== suggestions.length - 1 && (
+              <img
+                src="images/ProductSuggestion1plus.svg"
+                alt="plus"
+                className="w-4 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2"
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      {/* bottom */}
+      <div className="flex flex-col justify-center items-center">
+        <div className="flex flex-row mb-5">
+          <p className="text-base text-[#132F52] font-sansbold">
+            {totalAmountTitle}
+            <span> {totalAmount} </span>
+            تومان
+          </p>
+          <span className="mr-2 text-[#06BACE] text-base font-sansbold">
+            {selectedItems} کالا
+          </span>
+        </div>
+        <p className="mb-2 text-gray-600 text-sm ">
+          در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
+        </p>
+        <Button
+          className={`my-2 text-white rounded bg-blueBgColor px-2 py-2 text-sm`}
+          text={"اضافه کردن 1 مورد به سبد خرید"}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default ProductSuggestion1;
+
+ProductSuggestion1.defaultProps = {
+  cardTitle: "این کالاها برای خرید به شما پیشنهام می دهیم",
+  totalAmountTitle: "جمع لوازم اختیاری خریداری شده",
+  totalAmount: "56/894/400",
+  selectedItems: 1,
+
+  suggestions: [
+    {
+      productImage: "images/ProductSuggestion1product-chair.svg",
+      productTitle: "لپ تاپ گیمینگ ایسوس",
+      productPrice: "750000",
+    },
+    {
+      productImage: "images/ProductSuggestion1product-chair.svg",
+      productTitle: "مانیتور 40 اینچ",
+      productPrice: "3.000.000",
+    },
+    {
+      productImage: "images/ProductSuggestion1product-chair.svg",
+      productTitle: "ماوس گیمینگ",
+      productPrice: "650/000",
+    },
+    {
+      productImage: "images/ProductSuggestion1product-chair.svg",
+      productTitle: "مانیتور 40 اینچ",
+      productPrice: "3.000.000",
+    },
+    {
+      productImage: "images/ProductSuggestion1product-chair.svg",
+      productTitle: "ماوس گیمینگ",
+      productPrice: "650/000",
+    },
+    {
+      productImage: "images/ProductSuggestion1product-chair.svg",
+      productTitle: "ماوس گیمینگ",
+      productPrice: "650/000",
+    },
+    {
+      productImage: "images/ProductSuggestion1product-chair.svg",
+      productTitle: "ماوس گیمینگ",
+      productPrice: "650/000",
+    },
+    {
+      productImage: "images/ProductSuggestion1product-chair.svg",
+      productTitle: "ماوس گیمینگ",
+      productPrice: "650/000",
+    },
+  ],
+};

src/components/ProductSuggestionCard/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import ProductSuggestion1 from "./ProductSuggestion1";
+
+function ProductSuggestionCard() {
+  const list = {
+    1: <ProductSuggestion1 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default ProductSuggestionCard;

src/redux/data.js

@@ -25,6 +25,7 @@ import Sidebar from "../components/Sidebar";
 import SingleProduct from "../components/SingleProduct";
 import Rating from "../components/Rating";
 import Tooltip from "../components/Tooltip";
+import ProductSuggestionCard from "../components/ProductSuggestionCard";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -588,6 +589,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Product Suggestion Card",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Product Suggestion Card",
+      component: <ProductSuggestionCard />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",