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 }) => {
return (
<section className="flex flex-row border border-gray-400 rounded">
<section className="flex flex-row bg-surface border border-surfaceBorder rounded">
{/* right */}
<div className="flex flex-1 flex-col">
{/* 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) => (
<div
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 && (
<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>
)}
<p className="text-xs text-blue-900">{process.name}</p>
<span className="text-xs mr-2 text-blue-900">
<p className="text-xs text-primaryText">{process.name}</p>
<span className="text-xs mr-2 text-primaryText">
{process.content}
</span>
</div>
@ -27,7 +27,7 @@ const ProcessCard = ({ processes, title, hint, items, options }) => {
</div>
{/* middle */}
<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>
</div>
{/* bottom */}
@ -38,25 +38,25 @@ const ProcessCard = ({ processes, title, hint, items, options }) => {
icon={"images/white-cart-icon.svg"}
iconHolderClassName={""}
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 */}
<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) => (
<div
key={i}
className="flex flex-row flex-1 items-center justify-center flex-grow"
>
<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 mr-1 text-blue-900">{item.ans}</p>
<p className="text-xs text-primaryText">{item.name}</p>
<p className="text-xs mr-1 text-primaryText">{item.ans}</p>
</div>
))}
</div>
</div>
</div>
{/* 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) => (
<div key={j} className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center">
@ -79,7 +79,7 @@ ProcessCard.defaultProps = {
processes: [
{
color: "bg-red-600",
color: "bg-error",
name: "فرایند اجرایی",
content: 256,
},
@ -89,7 +89,7 @@ ProcessCard.defaultProps = {
content: "پرداخت شده",
},
{
color: "bg-blue-600",
color: "bg-info",
name: "در حال انجام",
content: 55,
},

Loading…
Cancel
Save