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 = () => {
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
subTitle={false}
title={"افراد حاضر در این سالن"}
titleClassName={"font-sansbold text-[#0F0543]"}
titleBorderClassName={"w-1.5 h-7 bg-[#1F8CF9] ml-2"}
titleClassName={"font-bold text-primaryText"}
titleBorderClassName={"w-1.5 h-7 bg-primary ml-2"}
/>
<div className="mt-7">
<SearchBox
searchIcon={"images/CardDesign3search-icon.svg"}
placeholder={"جستجو برا اساس اسم یا کد ملی"}
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>

@ -6,7 +6,7 @@ const CustomToast2 = ({ items, num }) => {
{items.slice(0, num).map((item, index) => (
<div
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 */}
<div className="flex flex-row items-center flex-1 ">
@ -16,12 +16,12 @@ const CustomToast2 = ({ items, num }) => {
alt={item.profilePic}
/>
<div className="flex flex-col mr-2">
<p className="text-sm text-[#0F0543]">{item.name}</p>
<p className="text-xs mt-1.5 mb-1 text-[#2A527A]">
<p className="text-sm text-primaryText">{item.name}</p>
<p className="text-xs mt-1.5 mb-1 text-primaryLight">
<span className="ml-1">تاریخ ورود:</span>
{item.enteryData}
</p>
<p className="text-xs text-[#2A527A]">
<p className="text-xs text-primaryLight">
<span>کد ملی</span>
{item.idCard}
</p>
@ -29,7 +29,7 @@ const CustomToast2 = ({ items, num }) => {
</div>
{/* left */}
<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}
</span>
<img

@ -6,8 +6,8 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
console.log(items.alertIcon);
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) => (
<>
<div
@ -18,13 +18,13 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
<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>
<span className="font-bold">{item.subtitle}</span>
{item.title}
</p>
{item.customerSatisfaction && (
<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}
</span>
</p>
@ -40,16 +40,16 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
)}
</div>
{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">
<p className="text-lg text-blue-600 mt-5 mb-2">
<p className="text-lg text-primary mt-5 mb-2">
{productPrice}
<span className="text-sm text-gray-700 font-light">تومان</span>
<span className="text-sm text-primaryText">تومان</span>
</p>
<p className="text-xs font-light text-gray-600">
<p className="text-xs text-primaryText">
با خرید این کالا
<span>{discountPrice}</span>
صرفه جویی کنید
@ -58,11 +58,11 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
<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"
className="my-4 text-white rounded text-sm p-2 bg-primary hover:bg-primaryDark hover:bg-opacity-90"
/>
</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>
<img
src="images/ProductStatusCardarrow-icon.svg"
@ -71,16 +71,16 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
/>
</div>
<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>
<p className="text-xs mt-2 leading-5 text-justify">
<p className="text-xs mt-2 leading-5 text-justify text-primaryText">
از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی
خوشتون نیومده میتونید بی قید و شرط پس بدید
</p>
</div>
</div>
</section>
</>
);
};

Loading…
Cancel
Save