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 = ({ |
||||
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: `گارانتی اصالت و سلامت فیزیکی`, |
||||
}, |
||||
]; |
||||
import AddToCart1 from "./AddToCart1"; |
||||
import AddToCart2 from "./AddToCart2"; |
||||
|
||||
function AddToCart() { |
||||
const list = { |
||||
1: <AddToCart1 />, |
||||
2: <AddToCart2 />, |
||||
}; |
||||
const [type, setType] = useState(1); |
||||
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 className="w-full flex flex-col items-center"> |
||||
<select |
||||
className="mb-10 w-20 bg-gray-200" |
||||
onChange={(e) => setType(e.target.value)} |
||||
> |
||||
{Object.keys(list).map((option, index) => ( |
||||
<option key={index}>{option}</option> |
||||
))} |
||||
</select> |
||||
{list[type]} |
||||
</div> |
||||
); |
||||
}; |
||||
} |
||||
|
||||
export default AddToCartCard; |
||||
export default AddToCart; |
||||
|
||||
Loading…
Reference in new issue