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.
157 lines
5.5 KiB
157 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", |
|
}, |
|
], |
|
};
|
|
|