update src/components/AddToCart/AddToCart1/index.js, src/components/AddToCart/AddToCart2/index.js and default.js

master
mahdi 2 years ago
parent 62ccaefbbe
commit 3bd6fb08c6
  1. 16
      src/components/AddToCart/AddToCart1/index.js
  2. 28
      src/components/AddToCart/AddToCart2/index.js
  3. 2
      src/components/ThemeColor/default.js

@ -26,36 +26,36 @@ const AddToCart1 = ({
}, },
]; ];
return ( return (
<div className="w-full felx flex-col items-center justify-center p-4 pt-0 bg-gray-200"> <div className="w-full felx flex-col items-center justify-center p-4 pt-0 bg-surface rounded border border-surfaceBorder">
{showProduct && ( {showProduct && (
<div className="w-full max-w-8 flex justify-center items-center py-4 overflow-hidden"> <div className="w-full max-w-8 flex justify-center items-center py-4 overflow-hidden">
<img <img
src={productImg} src={productImg}
alt="productImage" alt="productImage"
className="max-w-[100px] ml-4 py-2 px-4 bg-gray-200 rounded" className="max-w-[100px] ml-4 py-2 px-4 bg-gray-100 rounded"
/> />
<div className="text-sm"> <div className="text-sm">
<h1 className="text-sm">{productName}</h1> <h1 className="text-sm">{productName}</h1>
<p className="pt-2 text-xs text-blue-400">{productCat}</p> <p className="pt-2 text-xs text-primary">{productCat}</p>
</div> </div>
</div> </div>
)} )}
{specialities.map((item, index) => ( {specialities.map((item, index) => (
<div <div
key={index} key={index}
className="w-full flex items-center p-2 border-b border-solid border-gray-300" className="w-full flex items-center p-2 border-b border-solid border-surfaceBorder"
> >
{item.icon && <img src={item.icon} alt="" className="pl-3" />} {item.icon && <img src={item.icon} alt="" className="pl-3" />}
<p className="text-sm text-blue-400 text-right">{item.description}</p> <p className="text-sm text-primary text-right">{item.description}</p>
</div> </div>
))} ))}
<div className="w-full flex flex-col items-center justify-center p-4"> <div className="w-full flex flex-col items-center justify-center p-4">
<h1 className="text-xl text-gray-500"> <h1 className="text-xl text-primary">
<span className="text-blue-400"> {price} </span> <span className="text-blue-400"> {price} </span>
تومان تومان
</h1> </h1>
{profit && ( {profit && (
<h5 className="p-2 pb-0 text-xs text-blue-400"> <h5 className="p-2 pb-0 text-xs text-primary">
با خرید این کالا {profit} تومان سود کنید با خرید این کالا {profit} تومان سود کنید
</h5> </h5>
)} )}

@ -6,7 +6,7 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
return ( return (
<section className="w-fit"> <section className="w-fit">
<div className="flex flex-col bg-gray-200 rounded px-4 py-2"> <div className="flex flex-col bg-surface rounded px-4 py-2">
{items.map((item, index) => ( {items.map((item, index) => (
<> <>
<div <div
@ -14,16 +14,16 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
key={index} key={index}
> >
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<img src={item.icon} alt="" className="w-8" /> <img src={item.icon} alt="icon" className="w-8" />
<div className="flex flex-col mr-3"> <div className="flex flex-col mr-3">
<p className="text-sm"> <p className="text-sm text-primaryText">
<span className="font-sansbold">{item.subtitle}</span> <span className="font-bold">{item.subtitle}</span>
{item.title} {item.title}
</p> </p>
{item.customerSatisfaction && ( {item.customerSatisfaction && (
<p className="text-xs mt-1"> <p className="text-xs mt-1 text-primaryText">
رضایت خریداران: رضایت خریداران:
<span className="font-sansbold text-green-500 mr-2"> <span className="font-bold text-primary mr-2">
{item.customerSatisfactionPercent} {item.customerSatisfactionPercent}
</span> </span>
</p> </p>
@ -39,16 +39,16 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
)} )}
</div> </div>
{Number(index) !== items.length - 1 && ( {Number(index) !== items.length - 1 && (
<div className="border-b border-gray-300"></div> <div className="border-b border-surfaceBorder"></div>
)} )}
</> </>
))} ))}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<p className="text-lg text-blue-600 mt-5 mb-2"> <p className="text-lg text-primary mt-5 mb-2">
{productPrice} {productPrice}
<span className="text-sm text-gray-700 font-light">تومان</span> <span className="text-sm text-primaryText">تومان</span>
</p> </p>
<p className="text-xs font-light text-gray-600"> <p className="text-xs text-primaryText">
با خرید این کالا با خرید این کالا
<span>{discountPrice}</span> <span>{discountPrice}</span>
صرفه جویی کنید صرفه جویی کنید
@ -57,11 +57,11 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
<div className="w-full flex flex-col items-center"> <div className="w-full flex flex-col items-center">
<Button <Button
text={"افزودن به سبد خرید"} text={"افزودن به سبد خرید"}
className="my-4 text-white rounded-sm text-sm p-2 bg-blue-400 hover:bg-blue-600 hover:bg-opacity-90" className="my-4 text-white rounded text-sm p-2 bg-primary hover:bg-primaryDark hover:bg-opacity-90"
/> />
</div> </div>
</div> </div>
<div className="bg-gray-200 rounded px-4 py-2 mt-2 flex flex-row items-center"> <div className="bg-surface rounded px-4 py-2 mt-2 flex flex-row items-center">
<div> <div>
<img <img
src="images/AddToCart2arrow-icon.svg" src="images/AddToCart2arrow-icon.svg"
@ -70,10 +70,10 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
/> />
</div> </div>
<div className="flex flex-col mr-5"> <div className="flex flex-col mr-5">
<h2 className="text-sm font-sansbold text-blue-900"> <h2 className="text-sm font-bold text-primaryDark">
بازگشت بی چون و چرا بازگشت بی چون و چرا
</h2> </h2>
<p className="text-xs mt-2 leading-5 text-justify"> <p className="text-xs mt-2 leading-5 text-justify text-primaryText">
از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی
خوشتون نیومده میتونید بی قید و شرط پس بدید خوشتون نیومده میتونید بی قید و شرط پس بدید
</p> </p>

@ -11,7 +11,7 @@ const defaultTheme = {
backgroundText: "#000000", backgroundText: "#000000",
surface: "#ffffff", surface: "#ffffff",
surfaceText: "#000000", surfaceText: "#000000",
surfaceBorder: "#c8d6e5", surfaceBorder: "#dcdde1",
info: "#43c1ff", info: "#43c1ff",
infoText: "#000000", infoText: "#000000",
success: "#42b258", success: "#42b258",

Loading…
Cancel
Save