parent
0352800ffe
commit
a3786df817
11 changed files with 276 additions and 67 deletions
|
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 |
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 864 B |
|
After Width: | Height: | Size: 652 B |
@ -0,0 +1,68 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const AddToCart1 = ({ |
||||||
|
numberOfSuggest, |
||||||
|
sendingTime, |
||||||
|
button, |
||||||
|
price, |
||||||
|
profit, |
||||||
|
showProduct, |
||||||
|
productName, |
||||||
|
productImg, |
||||||
|
productCat, |
||||||
|
}) => { |
||||||
|
const specialities = [ |
||||||
|
{ |
||||||
|
icon: "images/tick-circle.svg", |
||||||
|
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: "images/shield-tick.svg", |
||||||
|
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: "images/delivery-icon.svg", |
||||||
|
description: `گارانتی اصالت و سلامت فیزیکی`, |
||||||
|
}, |
||||||
|
]; |
||||||
|
return ( |
||||||
|
<div className="w-full felx flex-col items-center justify-center mx-4 p-4 pt-0 bg-gray-100"> |
||||||
|
{showProduct && ( |
||||||
|
<div className="w-full max-w-8 flex justify-center items-center m-0 py-4 overflow-hidden"> |
||||||
|
<img |
||||||
|
src={productImg} |
||||||
|
alt="productImage" |
||||||
|
className="max-w-[100px] ml-4 py-2 px-4 bg-gray-200 rounded" |
||||||
|
/> |
||||||
|
<div className="text-sm"> |
||||||
|
<h1 className="text-sm">{productName}</h1> |
||||||
|
<p className="pt-2 text-xs text-blue-400">{productCat}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{specialities.map((item, index) => ( |
||||||
|
<div |
||||||
|
key={index} |
||||||
|
className="w-full flex items-center p-2 border-b border-solid border-gray-300" |
||||||
|
> |
||||||
|
{item.icon && <img src={item.icon} alt="" className="pl-3" />} |
||||||
|
<p className="text-sm text-blue-400 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-blue-400"> {price} </span> |
||||||
|
تومان |
||||||
|
</h1> |
||||||
|
{profit && ( |
||||||
|
<h5 className="p-2 pb-0 text-xs text-blue-400"> |
||||||
|
با خرید این کالا {profit} تومان سود کنید |
||||||
|
</h5> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div className="w-full flex justify-center">{button}</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AddToCart1; |
||||||
@ -0,0 +1,126 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Button from "../../ButtonDesign/Button"; |
||||||
|
|
||||||
|
const AddToCart2 = ({ items, productPrice, discountPrice }) => { |
||||||
|
console.log(items.alertIcon); |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="w-fit"> |
||||||
|
<div className="flex flex-col bg-gray-200 rounded px-4 py-2"> |
||||||
|
{items.map((item, index) => ( |
||||||
|
<> |
||||||
|
<div |
||||||
|
className="flex flex-row items-center justify-between my-3" |
||||||
|
key={index} |
||||||
|
> |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<img src={item.icon} alt="" className="w-8" /> |
||||||
|
<div className="flex flex-col mr-3"> |
||||||
|
<p className="text-sm"> |
||||||
|
<span className="font-sansbold">{item.subtitle}</span> |
||||||
|
{item.title} |
||||||
|
</p> |
||||||
|
{item.customerSatisfaction && ( |
||||||
|
<p className="text-xs mt-1"> |
||||||
|
رضایت خریداران: |
||||||
|
<span className="font-sansbold text-green-500 mr-2"> |
||||||
|
{item.customerSatisfactionPercent} |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{item.alertIcon && ( |
||||||
|
<img |
||||||
|
src="images/AddToCart2info-circle.svg" |
||||||
|
alt="" |
||||||
|
className="w-5" |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{Number(index) !== items.length - 1 && ( |
||||||
|
<div className="border-b border-gray-300"></div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
))} |
||||||
|
<div className="flex flex-col items-center"> |
||||||
|
<p className="text-lg text-blue-600 mt-5 mb-2"> |
||||||
|
{productPrice} |
||||||
|
<span className="text-sm 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 |
||||||
|
text={"افزودن به سبد خرید"} |
||||||
|
className="my-4 text-white rounded-sm text-sm p-2 bg-blue-400 hover:bg-blue-600 hover:bg-opacity-90" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="bg-gray-200 rounded px-4 py-2 mt-2 flex flex-row items-center"> |
||||||
|
<div> |
||||||
|
<img |
||||||
|
src="images/AddToCart2arrow-icon.svg" |
||||||
|
alt="" |
||||||
|
className="w-20 h-20" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col mr-5"> |
||||||
|
<h2 className="text-sm font-sansbold text-blue-900"> |
||||||
|
بازگشت بی چون و چرا |
||||||
|
</h2> |
||||||
|
<p className="text-xs mt-2 leading-5 text-justify"> |
||||||
|
از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی |
||||||
|
خوشتون نیومده میتونید بی قید و شرط پس بدید |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AddToCart2; |
||||||
|
|
||||||
|
AddToCart2.defaultProps = { |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
icon: "images/AddToCart2tick-circle.svg", |
||||||
|
title: "توصیه به خرید توسط 4420 نفر", |
||||||
|
subtitle: null, |
||||||
|
alertIcon: false, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: "images/AddToCart2icon-shop.svg", |
||||||
|
title: " آپادانا ", |
||||||
|
subtitle: " فروشنده", |
||||||
|
alertIcon: true, |
||||||
|
customerSatisfaction: true, |
||||||
|
customerSatisfactionPercent: " 91.5 ", |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: "images/AddToCart2delivery-icon.svg", |
||||||
|
title: " 20 روز کاری پس از سفارش ", |
||||||
|
subtitle: "زمان ارسال", |
||||||
|
alertIcon: false, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: "images/AddToCart2shield-tick.svg", |
||||||
|
title: "اصالت و سلامت فیزیکی", |
||||||
|
subtitle: "گارانتی ", |
||||||
|
alertIcon: true, |
||||||
|
customerSatisfaction: false, |
||||||
|
customerSatisfactionPercent: null, |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
|
productPrice: " 56/894/000 ", |
||||||
|
discountPrice: " 540.000 ", |
||||||
|
}; |
||||||
@ -1,68 +1,27 @@ |
|||||||
import React from "react"; |
import React, { useState } from "react"; |
||||||
|
|
||||||
const AddToCartCard = ({ |
import AddToCart1 from "./AddToCart1"; |
||||||
numberOfSuggest, |
import AddToCart2 from "./AddToCart2"; |
||||||
sendingTime, |
|
||||||
button, |
function AddToCart() { |
||||||
price, |
const list = { |
||||||
profit, |
1: <AddToCart1 />, |
||||||
showProduct, |
2: <AddToCart2 />, |
||||||
productName, |
}; |
||||||
productImg, |
const [type, setType] = useState(1); |
||||||
productCat, |
|
||||||
}) => { |
|
||||||
const specialities = [ |
|
||||||
{ |
|
||||||
icon: "images/tick-circle.svg", |
|
||||||
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: "images/shield-tick.svg", |
|
||||||
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: "images/delivery-icon.svg", |
|
||||||
description: `گارانتی اصالت و سلامت فیزیکی`, |
|
||||||
}, |
|
||||||
]; |
|
||||||
return ( |
return ( |
||||||
<div className="w-full felx flex-col items-center justify-center mx-4 p-4 pt-0 bg-gray-100"> |
<div className="w-full flex flex-col items-center"> |
||||||
{showProduct && ( |
<select |
||||||
<div className="w-full max-w-8 flex justify-center items-center m-0 py-4 overflow-hidden"> |
className="mb-10 w-20 bg-gray-200" |
||||||
<img |
onChange={(e) => setType(e.target.value)} |
||||||
src={productImg} |
> |
||||||
alt="productImage" |
{Object.keys(list).map((option, index) => ( |
||||||
className="max-w-[100px] ml-4 py-2 px-4 bg-gray-200 rounded" |
<option key={index}>{option}</option> |
||||||
/> |
))} |
||||||
<div className="text-sm"> |
</select> |
||||||
<h1 className="text-sm">{productName}</h1> |
{list[type]} |
||||||
<p className="pt-2 text-xs text-blue-400">{productCat}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
{specialities.map((item, index) => ( |
|
||||||
<div |
|
||||||
key={index} |
|
||||||
className="w-full flex items-center p-2 border-b border-solid border-gray-300" |
|
||||||
> |
|
||||||
{item.icon && <img src={item.icon} alt="" className="pl-3" />} |
|
||||||
<p className="text-sm text-blue-400 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-blue-400"> {price} </span> |
|
||||||
تومان |
|
||||||
</h1> |
|
||||||
{profit && ( |
|
||||||
<h5 className="p-2 pb-0 text-xs text-blue-400"> |
|
||||||
با خرید این کالا {profit} تومان سود کنید |
|
||||||
</h5> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
<div className="w-full flex justify-center">{button}</div> |
|
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
} |
||||||
|
|
||||||
export default AddToCartCard; |
export default AddToCart; |
||||||
|
|||||||
Loading…
Reference in new issue