update src/components/CardDesgin/ProcessCard/index.js

master
mahdi 2 years ago
parent 4e81d83dfe
commit c9223c718c
  1. 26
      src/components/CardDesgin/ProcessCard/index.js

@ -3,11 +3,11 @@ import Button from "../../ButtonDesign/Button";
const ProcessCard = ({ processes, title, hint, items, options }) => { const ProcessCard = ({ processes, title, hint, items, options }) => {
return ( return (
<section className="flex flex-row border border-gray-400 rounded"> <section className="flex flex-row bg-surface border border-surfaceBorder rounded">
{/* right */} {/* right */}
<div className="flex flex-1 flex-col"> <div className="flex flex-1 flex-col">
{/* top */} {/* top */}
<div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-gray-300 divide-x-reverse"> <div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-surfaceBorder divide-x-reverse">
{processes.map((process, index) => ( {processes.map((process, index) => (
<div <div
className="flex flex-row flex-1 items-center justify-center flex-grow" className="flex flex-row flex-1 items-center justify-center flex-grow"
@ -15,11 +15,11 @@ const ProcessCard = ({ processes, title, hint, items, options }) => {
> >
{process.color && ( {process.color && (
<div <div
className={`w-1.5 h-5 rounded-sm ml-1.5 ${process.color}`} className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`}
></div> ></div>
)} )}
<p className="text-xs text-blue-900">{process.name}</p> <p className="text-xs text-primaryText">{process.name}</p>
<span className="text-xs mr-2 text-blue-900"> <span className="text-xs mr-2 text-primaryText">
{process.content} {process.content}
</span> </span>
</div> </div>
@ -27,7 +27,7 @@ const ProcessCard = ({ processes, title, hint, items, options }) => {
</div> </div>
{/* middle */} {/* middle */}
<div className="flex flex-col p-4 my-5 mr-5"> <div className="flex flex-col p-4 my-5 mr-5">
<h2 className="text-lg text-blue-800 font-sansbold">{title}</h2> <h2 className="text-lg text-primaryText font-bold">{title}</h2>
<p className="text-sm text-justify leading-6 mt-3">{hint}</p> <p className="text-sm text-justify leading-6 mt-3">{hint}</p>
</div> </div>
{/* bottom */} {/* bottom */}
@ -38,25 +38,25 @@ const ProcessCard = ({ processes, title, hint, items, options }) => {
icon={"images/white-cart-icon.svg"} icon={"images/white-cart-icon.svg"}
iconHolderClassName={""} iconHolderClassName={""}
iconClassName={"mr-2 w-5"} iconClassName={"mr-2 w-5"}
className="p-2 bg-blue-500 text-white text-sm rounded-md" className="p-2 bg-primary text-white text-sm rounded"
/> />
{/* left */} {/* left */}
<div className="flex-1 flex flex-row items-center justify-around divide-x-2 divide-gray-300 divide-x-reverse"> <div className="flex-1 flex flex-row items-center justify-around divide-x-2 divide-surfaceBorder divide-x-reverse">
{items.map((item, i) => ( {items.map((item, i) => (
<div <div
key={i} key={i}
className="flex flex-row flex-1 items-center justify-center flex-grow" className="flex flex-row flex-1 items-center justify-center flex-grow"
> >
<img src={item.icon} alt="" className="w-4 h-4 ml-1" /> <img src={item.icon} alt="" className="w-4 h-4 ml-1" />
<p className="text-xs text-blue-900">{item.name}</p> <p className="text-xs text-primaryText">{item.name}</p>
<p className="text-xs mr-1 text-blue-900">{item.ans}</p> <p className="text-xs mr-1 text-primaryText">{item.ans}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</div> </div>
{/* left */} {/* left */}
<div className="flex flex-col justify-center p-2 border-r border-gray-400 gap-y-4"> <div className="flex flex-col justify-center p-2 border-r border-surfaceBorder gap-y-4">
{options.map((option, j) => ( {options.map((option, j) => (
<div key={j} className="flex flex-row items-center justify-between"> <div key={j} className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
@ -79,7 +79,7 @@ ProcessCard.defaultProps = {
processes: [ processes: [
{ {
color: "bg-red-600", color: "bg-error",
name: "فرایند اجرایی", name: "فرایند اجرایی",
content: 256, content: 256,
}, },
@ -89,7 +89,7 @@ ProcessCard.defaultProps = {
content: "پرداخت شده", content: "پرداخت شده",
}, },
{ {
color: "bg-blue-600", color: "bg-info",
name: "در حال انجام", name: "در حال انجام",
content: 55, content: 55,
}, },

Loading…
Cancel
Save