diff --git a/src/components/ProductSuggestion/plus.svg b/public/images/ProductSuggestion1plus.svg
similarity index 100%
rename from src/components/ProductSuggestion/plus.svg
rename to public/images/ProductSuggestion1plus.svg
diff --git a/src/components/ProductSuggestion/product-chair.svg b/public/images/ProductSuggestion1product-chair.svg
similarity index 100%
rename from src/components/ProductSuggestion/product-chair.svg
rename to public/images/ProductSuggestion1product-chair.svg
diff --git a/src/components/ProductSuggestion/index.js b/src/components/ProductSuggestion/index.js
deleted file mode 100644
index ff7ed59..0000000
--- a/src/components/ProductSuggestion/index.js
+++ /dev/null
@@ -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 (
-
-
- این کالاها برای خرید به شما پیشنهام می دهیم
-
- {/* product design */}
-
- {suggestions.map((suggestion, index) => (
-
-
-
setSelectedProduct(suggestion)}
- onClick={() =>
- setSelectedProduct(
- selectedProduct.includes(suggestion)
- ? selectedProduct.filter((item) => item != suggestion)
- : [...selectedProduct, suggestion]
- )
- }
- >
-
-
- {suggestion.productTitle}
-
-
- {suggestion.productPrice}
- تومان
-
-
- {/* {suggestion.selected && (
- انتخاب شما
- )} */}
- {selectedProduct.includes(suggestion) && (
- انتخاب شما
- )}
-
- setSelectedProduct(
- selectedProduct.includes(suggestion)
- ? selectedProduct.filter((item) => item != suggestion)
- : [...selectedProduct, suggestion]
- )
- }
- className="checkbox-input mt-4 cursor-pointer w-4 h-4"
- type="checkbox"
- />
-
-
-
- ))}
-
- {/* bottom */}
-
-
-
- جمع لوازم اختیاری خریداری شده
- 56/894/400
- تومان
-
-
- 1 کالا
-
-
-
- در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
-
-
-
-
- );
-};
-
-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 (
-//
-//
-// این کالاها برای خرید به شما پیشنهام می دهیم
-//
-// {/* product design */}
-//
-// {suggestions.map((suggestion, index) => (
-//
setSelectedProduct(suggestion)}
-// >
-//
-//
-//
-//
-// {suggestion.productTitle}
-//
-//
-// {suggestion.productPrice}
-// تومان
-//
-//
-// {suggestion.selected && (
-// انتخاب شما
-// )}
-// -1}
-// onClick={() => setSelectedProduct(suggestion)}
-// className="checkbox-input mt-4 cursor-pointer w-4 h-4"
-// type="checkbox"
-// />
-//
-//
-//
-// ))}
-//
-// {/* bottom */}
-//
-//
-//
-// جمع لوازم اختیاری خریداری شده
-// 56/894/400
-// تومان
-//
-//
-// 1 کالا
-//
-//
-//
-// در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
-//
-//
-//
-//
-// );
-// };
-
-// 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,
-// },
-// ],
-// };
diff --git a/src/components/ProductSuggestionCard/ProductSuggestion1/index.js b/src/components/ProductSuggestionCard/ProductSuggestion1/index.js
new file mode 100644
index 0000000..c86ac05
--- /dev/null
+++ b/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 (
+
+
+ {cardTitle}
+
+ {/* product design */}
+
+ {suggestions.map((suggestion, index) => (
+
+
setSelectedProduct(suggestion)}
+ onClick={() =>
+ setSelectedProduct(
+ selectedProduct.includes(suggestion)
+ ? selectedProduct.filter((item) => item != suggestion)
+ : [...selectedProduct, suggestion]
+ )
+ }
+ >
+
+
+ {suggestion.productTitle}
+
+
+ {suggestion.productPrice}
+ تومان
+
+
+ {/* {suggestion.selected && (
+ انتخاب شما
+ )} */}
+ {selectedProduct.includes(suggestion) && (
+ انتخاب شما
+ )}
+
+ setSelectedProduct(
+ selectedProduct.includes(suggestion)
+ ? selectedProduct.filter((item) => item != suggestion)
+ : [...selectedProduct, suggestion]
+ )
+ }
+ className="w-4 mt-4 cursor-pointer "
+ type="checkbox"
+ />
+
+
+ {Number(index) !== suggestions.length - 1 && (
+
+ )}
+
+ ))}
+
+ {/* bottom */}
+
+
+
+ {totalAmountTitle}
+ {totalAmount}
+ تومان
+
+
+ {selectedItems} کالا
+
+
+
+ در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
+
+
+
+
+ );
+};
+
+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",
+ },
+ ],
+};
diff --git a/src/components/ProductSuggestionCard/index.js b/src/components/ProductSuggestionCard/index.js
new file mode 100644
index 0000000..4ef6e8e
--- /dev/null
+++ b/src/components/ProductSuggestionCard/index.js
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import ProductSuggestion1 from "./ProductSuggestion1";
+
+function ProductSuggestionCard() {
+ const list = {
+ 1: ,
+ };
+ const [type, setType] = useState(1);
+ return (
+
+
+ {list[type]}
+
+ );
+}
+
+export default ProductSuggestionCard;
diff --git a/src/redux/data.js b/src/redux/data.js
index 7fc226a..0037e94 100644
--- a/src/redux/data.js
+++ b/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: ,
+ code: null,
+ },
+ },
// mini components
{
name: "Mini Components",