You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
4.3 KiB
115 lines
4.3 KiB
// |
|
// 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-bold 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-bold"> |
|
// جمع لوازم اختیاری خریداری شده |
|
// <span> 56/894/400 </span> |
|
// تومان |
|
// </p> |
|
// <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-bold"> |
|
// 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, |
|
// }, |
|
// ], |
|
// };
|
|
|