|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,117 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import arrow from "./arrow-icon.svg"; |
||||||
|
import delivery from "./delivery-icon.svg"; |
||||||
|
import checked from "./icon1.svg"; |
||||||
|
import circle from "./info-circle.svg"; |
||||||
|
import shield from "./shield-tick.svg"; |
||||||
|
import tick from "./tick-circle.svg"; |
||||||
|
import shop from "./icon-shop.svg"; |
||||||
|
|
||||||
|
const ProductStatusCard = ({ items, productPrice, discountPrice }) => { |
||||||
|
console.log(items.alertIcon); |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="bg-white m-10 w-3/12 p-5"> |
||||||
|
<div className="bg-gray-200 rounded px-4 py-2"> |
||||||
|
{items.map((item, index) => ( |
||||||
|
<div |
||||||
|
className="flex flex-row items-center justify-between mb-4" |
||||||
|
key={index} |
||||||
|
> |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<img src={item.icon} alt="" className="w-10 h-10" /> |
||||||
|
<div className="flex flex-col mr-3"> |
||||||
|
<p className="text-sm"> |
||||||
|
<span className="font-bold">{item.subtitle}</span> |
||||||
|
{item.title} |
||||||
|
</p> |
||||||
|
{item.customerSatisfaction && ( |
||||||
|
<p className="text-xs mt-1"> |
||||||
|
رضایت خریداران: |
||||||
|
<span className="font-bold text-green-500 mr-2"> |
||||||
|
{item.customerSatisfactionPercent} |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{item.alertIcon && <img src={circle} alt="" className="w-8 h-8" />} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
<div className="flex flex-col items-center"> |
||||||
|
<p className="text-2xl text-blue-600 my-3"> |
||||||
|
{productPrice} |
||||||
|
<span className="text-lg text-gray-700 font-light">تومان</span> |
||||||
|
</p> |
||||||
|
<p className="text-xs font-light text-gray-600"> |
||||||
|
با خرید این کالا |
||||||
|
<span>{discountPrice}</span> |
||||||
|
صرفه جویی کنید |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div className="w-full flex flex-col items-center"> |
||||||
|
<button className="w-11/12 mt-7 mb-4 rounded bg-blue-400 text-white px-5 py-4 text-lg hover:bg-blue-600 transtition ease-linear duration-300"> |
||||||
|
افزودن به سبد خرید |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="bg-gray-200 rounded px-4 py-2 mt-2 flex flex-row items-center"> |
||||||
|
<div> |
||||||
|
<img src={arrow} alt="" className="w-20 h-20" /> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col mr-5"> |
||||||
|
<h2 className="text-sm font-bold text-blue-900"> |
||||||
|
بازگشت بی چون و چرا |
||||||
|
</h2> |
||||||
|
<p className="text-xs mt-2 text-justify"> |
||||||
|
از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی |
||||||
|
خوشتون نیومده میتونید بی قید و شرط پس بدید |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ProductStatusCard; |
||||||
|
|
||||||
|
ProductStatusCard.defaultProps = { |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
icon: tick, |
||||||
|
title: "توصیه به خرید توسط 4420 نفر", |
||||||
|
subtitle: null, |
||||||
|
alertIcon: false, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: shop, |
||||||
|
title: " آپادانا ", |
||||||
|
subtitle: " فروشنده", |
||||||
|
alertIcon: true, |
||||||
|
customerSatisfaction: true, |
||||||
|
customerSatisfactionPercent: " 91.5 ", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: delivery, |
||||||
|
title: " 20 روز کاری پس از سفارش ", |
||||||
|
subtitle: "زمان ارسال", |
||||||
|
alertIcon: false, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: shield, |
||||||
|
title: "اصالت و سلامت فیزیکی", |
||||||
|
subtitle: "گارانتی ", |
||||||
|
alertIcon: true, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
|
productPrice: " 56/894/000 ", |
||||||
|
discountPrice: " 540.000 ", |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 864 B |
|
After Width: | Height: | Size: 652 B |