|
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 |