|
|
|
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)" }}
|
|
|
|
// w-[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",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|