Reza_ashrafi
2 years ago
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 606 B After Width: | Height: | Size: 597 B |
|
Before Width: | Height: | Size: 970 B After Width: | Height: | Size: 940 B |
|
Before Width: | Height: | Size: 751 B After Width: | Height: | Size: 750 B |
|
Before Width: | Height: | Size: 668 B After Width: | Height: | Size: 747 B |
|
Before Width: | Height: | Size: 773 B After Width: | Height: | Size: 755 B |
|
After Width: | Height: | Size: 802 B |
|
Before Width: | Height: | Size: 800 B After Width: | Height: | Size: 796 B |
|
After Width: | Height: | Size: 794 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 961 B |
|
Before Width: | Height: | Size: 961 B After Width: | Height: | Size: 961 B |
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1,99 +0,0 @@ |
||||
import React from "react"; |
||||
|
||||
import circleTick from "../../assets/icons/vuesax-linear-tick-circle.svg"; |
||||
import shieldTick from "../../assets/icons/vuesax-linear-shield-tick.svg"; |
||||
import linearGroup from "../../assets/icons/vuesax-linear-group.svg"; |
||||
|
||||
const AddToCartCard = ({ |
||||
numberOfSuggest, |
||||
sendingTime, |
||||
button, |
||||
price, |
||||
profit, |
||||
showProduct, |
||||
productName, |
||||
productImg, |
||||
productCat, |
||||
footer, |
||||
}) => { |
||||
const specialities = [ |
||||
{ |
||||
icon: circleTick, |
||||
description: `${window.t( |
||||
"توصیه به خرید توسط" |
||||
)} ${numberOfSuggest} ${window.t("نفر")}`,
|
||||
}, |
||||
{ |
||||
icon: linearGroup, |
||||
description: `${window.t("زمان ارسال")} ${sendingTime} ${window.t( |
||||
"روز کاری پس از سفارش" |
||||
)}`,
|
||||
}, |
||||
{ |
||||
icon: shieldTick, |
||||
description: window.t("گارانتی اصالت و سلامت فیزیکی"), |
||||
}, |
||||
]; |
||||
return ( |
||||
<> |
||||
<div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center"> |
||||
{showProduct && ( |
||||
<div className="flex w-full max-w-8 overflow-hidden items-center py-4 m-0 justify-center"> |
||||
<img |
||||
src={productImg} |
||||
style={{ maxWidth: "100px" }} |
||||
className="py-2 px-4 bg-grayF4 rounded ml-4" |
||||
/> |
||||
<div className="text-sm"> |
||||
<h1 className="text-sm">{productName}</h1> |
||||
<p className=" text-xs pt-2 text-blueC0">{productCat}</p> |
||||
</div> |
||||
</div> |
||||
)} |
||||
{specialities.map((item, index) => ( |
||||
<div |
||||
className="flex items-center p-2 w-full border-0 border-b border-solid border-gray-300" |
||||
key={index} |
||||
> |
||||
{item.icon && <img src={item.icon} className="pl-3" />} |
||||
<p className="text-sm text-blue52 text-right">{item.description}</p> |
||||
</div> |
||||
))} |
||||
<div className="w-full flex flex-col items-center justify-center p-4"> |
||||
<h1 className="text-xl text-gray-500"> |
||||
<span className=" text-blueC0"> {price} </span> |
||||
{window.t("تومان")} |
||||
</h1> |
||||
{profit && ( |
||||
<h5 className="text-xs p-2 pb-0 text-blue52"> |
||||
{window.t("با خرید این کالا")} {profit} |
||||
{window.t("تومان سود کنید")} |
||||
</h5> |
||||
)} |
||||
</div> |
||||
<div className="w-full flex justify-center">{button}</div> |
||||
</div> |
||||
{footer && ( |
||||
<div className="flex bg-grayF7 p-4 w-full mx-4 items-center mt-4 max-w-xs"> |
||||
{footer == "SendBack" && ( |
||||
<> |
||||
<img src={specialities[0].icon} className="pl-3" /> |
||||
<div className="text-sm"> |
||||
<h3 className="text-blue52"> |
||||
{window.t("بازگشت بی چون و چرا")} |
||||
</h3> |
||||
<p> |
||||
{window.t( |
||||
"ما خیلی خوب هستیم و دوستتون داریم در صورتی که از کالایی خوشتون نیومد میتونید بی قید و شرط بسش بدید" |
||||
)} |
||||
</p> |
||||
</div> |
||||
</> |
||||
)} |
||||
</div> |
||||
)} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default AddToCartCard; |
||||
@ -1,60 +0,0 @@ |
||||
import React from "react"; |
||||
|
||||
const Banners = ({ |
||||
mainBanner, |
||||
leftBanner, |
||||
midTopBanner, |
||||
midBottomBanner, |
||||
}) => { |
||||
return ( |
||||
<div className="flex w-full justify-between" style={{ |
||||
// height: '400px'
|
||||
}}> |
||||
<div className={`h-full w-1/2 rounded-xl flex items-center`} style={{ |
||||
background: mainBanner ? '' : 'rgba(134,160,185,0.16)', |
||||
|
||||
}}> |
||||
|
||||
<img src={mainBanner} className="rounded-xl h-full w-full" /> |
||||
|
||||
</div> |
||||
<div className="flex h-full w-1/2 "> |
||||
<div className="flex flex-col w-1/2 h-full px-6 justify-center items-between"> |
||||
|
||||
<div className={`${midTopBanner ? '' : 'h-1/2 '} rounded-xl mb-2`} |
||||
style={{ |
||||
background: midTopBanner ? '' : 'rgba(134,160,185,0.16)', |
||||
|
||||
}} |
||||
> |
||||
|
||||
<img src={midTopBanner} className="rounded-xl" /> |
||||
</div> |
||||
<div className={`${midBottomBanner ? 'h-1/2' : 'h-1/2 '} flex justify-center rounded-xl mt-2`} |
||||
style={{ |
||||
background: midBottomBanner ? '' : 'rgba(134,160,185,0.16)', |
||||
|
||||
}} |
||||
> |
||||
|
||||
<img src={midBottomBanner} className="rounded-xl h-full" /> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
<div className=" h-full w-1/2 rounded-xl flex justify-center" |
||||
style={{ |
||||
background: leftBanner ? '' : 'rgba(134,160,185,0.16)', |
||||
|
||||
}} |
||||
> |
||||
<img src={leftBanner} className="rounded-xl" /> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
|
||||
export default Banners; |
||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 750 B |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 985 B |
|
Before Width: | Height: | Size: 988 B |