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.

158 lines
5.5 KiB

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",
},
],
};