update src/components/CardDesgin/CardDesign3/index.js, src/components/CardDesgin/CustomToast2/index.js and src/components/CardDesgin/ProductStatusCard/index.js

master
mahdi 2 years ago
parent 26f41a5388
commit 8693592864
  1. 8
      src/components/CardDesgin/CardDesign3/index.js
  2. 10
      src/components/CardDesgin/CustomToast2/index.js
  3. 26
      src/components/CardDesgin/ProductStatusCard/index.js

@ -10,19 +10,19 @@ import SearchBox from "../../SearchDesign/SearchBox";
const CardDesign3 = () => { const CardDesign3 = () => {
return ( return (
<div className="max-h-[600px] w-fit p-4 overflow-y-auto scrollYDesign flex flex-col bg-white shadow-sm border border-[#d2d2d2] rounded"> <div className="max-h-[600px] w-fit p-4 overflow-y-auto scrollYDesign flex flex-col bg-surface shadow-sm border border-surfaceBorder rounded">
<TitleSubtitle <TitleSubtitle
subTitle={false} subTitle={false}
title={"افراد حاضر در این سالن"} title={"افراد حاضر در این سالن"}
titleClassName={"font-sansbold text-[#0F0543]"} titleClassName={"font-bold text-primaryText"}
titleBorderClassName={"w-1.5 h-7 bg-[#1F8CF9] ml-2"} titleBorderClassName={"w-1.5 h-7 bg-primary ml-2"}
/> />
<div className="mt-7"> <div className="mt-7">
<SearchBox <SearchBox
searchIcon={"images/CardDesign3search-icon.svg"} searchIcon={"images/CardDesign3search-icon.svg"}
placeholder={"جستجو برا اساس اسم یا کد ملی"} placeholder={"جستجو برا اساس اسم یا کد ملی"}
className={ className={
"p-4 border-[#ddd] focus:border-gray-200 focus:ring-gray-200" "p-4 border-surfaceBorder focus:border-gray-200 focus:ring-gray-200"
} }
/> />
</div> </div>

@ -6,7 +6,7 @@ const CustomToast2 = ({ items, num }) => {
{items.slice(0, num).map((item, index) => ( {items.slice(0, num).map((item, index) => (
<div <div
key={index} key={index}
className="flex flex-row items-center p-4 bg-[#F8F8F8] border border-[#C9E2B3] rounded mt-4" className="flex flex-row items-center p-4 bg-surface border border-success rounded mt-4"
> >
{/* right */} {/* right */}
<div className="flex flex-row items-center flex-1 "> <div className="flex flex-row items-center flex-1 ">
@ -16,12 +16,12 @@ const CustomToast2 = ({ items, num }) => {
alt={item.profilePic} alt={item.profilePic}
/> />
<div className="flex flex-col mr-2"> <div className="flex flex-col mr-2">
<p className="text-sm text-[#0F0543]">{item.name}</p> <p className="text-sm text-primaryText">{item.name}</p>
<p className="text-xs mt-1.5 mb-1 text-[#2A527A]"> <p className="text-xs mt-1.5 mb-1 text-primaryLight">
<span className="ml-1">تاریخ ورود:</span> <span className="ml-1">تاریخ ورود:</span>
{item.enteryData} {item.enteryData}
</p> </p>
<p className="text-xs text-[#2A527A]"> <p className="text-xs text-primaryLight">
<span>کد ملی</span> <span>کد ملی</span>
{item.idCard} {item.idCard}
</p> </p>
@ -29,7 +29,7 @@ const CustomToast2 = ({ items, num }) => {
</div> </div>
{/* left */} {/* left */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<span className="px-2 py-0.5 mr-2 rounded-sm bg-[#C9E2B388] text-[#468722] font-sansbold"> <span className="px-2 py-0.5 mr-2 rounded-sm bg-[#C9E2B388] text-[#468722] font-bold">
{item.number} {item.number}
</span> </span>
<img <img

@ -6,8 +6,8 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
console.log(items.alertIcon); console.log(items.alertIcon);
return ( return (
<section className="bg-white p-4 w-fit"> <>
<div className="flex flex-col bg-gray-200 rounded px-4 py-2"> <div className="w-full flex flex-col bg-surface rounded px-4 py-2">
{items.map((item, index) => ( {items.map((item, index) => (
<> <>
<div <div
@ -18,13 +18,13 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
<img src={item.icon} alt="" className="w-8" /> <img src={item.icon} alt="" 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">
<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">
رضایت خریداران: رضایت خریداران:
<span className="font-sansbold text-green-500 mr-2"> <span className="font-bold text-primaryDark mr-2">
{item.customerSatisfactionPercent} {item.customerSatisfactionPercent}
</span> </span>
</p> </p>
@ -40,16 +40,16 @@ const ProductStatusCard = ({ 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>
صرفه جویی کنید صرفه جویی کنید
@ -58,11 +58,11 @@ const ProductStatusCard = ({ 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="w-full bg-surface rounded px-4 py-2 mt-2 flex flex-row items-center">
<div> <div>
<img <img
src="images/ProductStatusCardarrow-icon.svg" src="images/ProductStatusCardarrow-icon.svg"
@ -71,16 +71,16 @@ const ProductStatusCard = ({ 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-primaryText">
بازگشت بی چون و چرا بازگشت بی چون و چرا
</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>
</div> </div>
</div> </div>
</section> </>
); );
}; };

Loading…
Cancel
Save