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] + ) + } + > + productImage +

+ {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 && ( + plus + )} +
+ ))} +
+ {/* 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",