|
|
@ -7,12 +7,7 @@ import Button from "../Button"; |
|
|
|
import productImg from "./product-chair.svg"; |
|
|
|
import productImg from "./product-chair.svg"; |
|
|
|
import plus from "./plus.svg"; |
|
|
|
import plus from "./plus.svg"; |
|
|
|
|
|
|
|
|
|
|
|
const ProductSuggestion = ({ |
|
|
|
const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => { |
|
|
|
isDark, |
|
|
|
|
|
|
|
getSimilar, |
|
|
|
|
|
|
|
book, |
|
|
|
|
|
|
|
similarList, |
|
|
|
|
|
|
|
}) => { |
|
|
|
|
|
|
|
const [selectedProduct, setSelectedProduct] = useState(null); |
|
|
|
const [selectedProduct, setSelectedProduct] = useState(null); |
|
|
|
const [price, setPrice] = useState(0); |
|
|
|
const [price, setPrice] = useState(0); |
|
|
|
|
|
|
|
|
|
|
@ -33,7 +28,7 @@ const ProductSuggestion = ({ |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9"> |
|
|
|
<section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9"> |
|
|
|
<h2 className="text-center text-lg font-bold text-productPrice"> |
|
|
|
<h2 className="text-center text-lg font-bold text-productPrice"> |
|
|
|
این کالاها برای خرید به شما پیشنهام می دهیم |
|
|
|
{window.t("این کالاها برای خرید به شما پیشنهام می دهیم")} |
|
|
|
</h2> |
|
|
|
</h2> |
|
|
|
{/* product design */} |
|
|
|
{/* product design */} |
|
|
|
<div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full gap-5"> |
|
|
|
<div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full gap-5"> |
|
|
@ -56,7 +51,9 @@ const ProductSuggestion = ({ |
|
|
|
<h2 className="my-3 text-tiny">{book?.name}</h2> |
|
|
|
<h2 className="my-3 text-tiny">{book?.name}</h2> |
|
|
|
<p className="text-base text-blueC0 font-medium"> |
|
|
|
<p className="text-base text-blueC0 font-medium"> |
|
|
|
{separate(book?.price)} |
|
|
|
{separate(book?.price)} |
|
|
|
<span className="mx-1 text-xs text-black">تومان</span> |
|
|
|
<span className="mx-1 text-xs text-black"> |
|
|
|
|
|
|
|
{window.t("تومان")} |
|
|
|
|
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
{/* <div className="flex flex-col items-center mt-3"> |
|
|
|
{/* <div className="flex flex-col items-center mt-3"> |
|
|
|
<span className="text-xs">انتخاب شما</span> |
|
|
|
<span className="text-xs">انتخاب شما</span> |
|
|
@ -80,19 +77,23 @@ const ProductSuggestion = ({ |
|
|
|
<div className="flex flex-col justify-center items-center mt-4"> |
|
|
|
<div className="flex flex-col justify-center items-center mt-4"> |
|
|
|
<div className="flex flex-row mb-5"> |
|
|
|
<div className="flex flex-row mb-5"> |
|
|
|
<p className="text-base text-productPrice font-bold"> |
|
|
|
<p className="text-base text-productPrice font-bold"> |
|
|
|
جمع لوازم اختیاری خریداری شده |
|
|
|
|
|
|
|
|
|
|
|
{window.t("جمع لوازم اختیاری خریداری شده")} |
|
|
|
|
|
|
|
|
|
|
|
<span className="mx-1">{separate(price)}</span> |
|
|
|
<span className="mx-1">{separate(price)}</span> |
|
|
|
تومان |
|
|
|
{window.t("تومان")} |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<span className="text-lightBlueTextColor text-base mr-1 font-bold"> |
|
|
|
<span className="text-lightBlueTextColor text-base mr-1 font-bold"> |
|
|
|
1 کالا |
|
|
|
{window.t("1 کالا")} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p className="text-sm font-light text-gray-600 mb-4"> |
|
|
|
<p className="text-sm font-light text-gray-600 mb-4"> |
|
|
|
در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید |
|
|
|
{window.t( |
|
|
|
|
|
|
|
"در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید" |
|
|
|
|
|
|
|
)} |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
title="اضافه کردن به سبد خرید" |
|
|
|
title={window.t("اضافه کردن به سبد خرید")} |
|
|
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
|
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
|
|
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} |
|
|
|
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} |
|
|
|
width="calc(100% / 5)" |
|
|
|
width="calc(100% / 5)" |
|
|
@ -121,7 +122,7 @@ ProductSuggestion.defaultProps = { |
|
|
|
suggestions: [ |
|
|
|
suggestions: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
productImage: productImg, |
|
|
|
productImage: productImg, |
|
|
|
productTitle: "لپ تاپ گیمینگ ایسوس", |
|
|
|
productTitle: "لپ تاپ گیمینگ ایسوس", |
|
|
|
productPrice: "750000", |
|
|
|
productPrice: "750000", |
|
|
|
plusIcon: null, |
|
|
|
plusIcon: null, |
|
|
|
}, |
|
|
|
}, |
|
|
|