طرح جدید را اوکی کردم | 88

src/components/Button/index.js

@@ -6,6 +6,8 @@ const Button = ({
   iconHolderClassName,
   icon,
   text,
+  subTitle,
+  subTitleClass,
   onClick,
   sharpStyle,
   clippath,
@@ -19,6 +21,7 @@ const Button = ({
       className={`flex items-center justify-center transiton ease-linear duration-200 ${className}`}
     >
       {text}
+      {subTitle && <span className={`${subTitleClass} mr-1`}>{subTitle}</span>}
       {icon && (
         <span className={`${iconHolderClassName}`}>
           <img src={icon} alt="icon" className={`${iconClassName}`} />
@@ -35,6 +38,9 @@ Button.defaultProps = {
     "bg-primary text-primaryText hover:bg-primaryDark border border-b-4 border-primaryLight rounded text-sm px-4 py-4 hover:bg-opacity-90",
   text: "اطلاعات بیشتر",
 
+  subTitle: false,
+  subTitleClass: "text-sm",
+
   iconHolderClassName: "bg-secondary mr-2",
   iconClassName: "w-4",
   icon: false,

src/components/Card/index.js

@@ -1,83 +1,73 @@
 import React, { useState } from "react";
 
 import Button from "../Button";
+import CircleInCircle from "../CircleInCircle";
 
-import ax from "../../assets/images/square.svg";
 import FormInput from "../FormInput";
 
-const ProcessCard = ({
+const ProcessCard = ({ processes, title, hint, buttons, options }) => {
-  processes,
-  title,
-  hint,
-  items,
-  options,
-  blogAuthorImg,
-}) => {
   const [openModal, setOpenModal] = useState(false);
   console.log(openModal);
 
   return (
     <section className="w-fit mx-auto flex flex-row bg-surface border border-blue-400 rounded">
       {/* right */}
-      <div className="flex flex-1 flex-col">
+      <div className="flex flex-1 flex-col justify-between">
         {/* top */}
-        <div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-blue-400 divide-x-reverse">
+        <div className="flex flex-row p-4 bg-[#EEFCE4] rounded divide-x-2 divide-[#C7C7C7] divide-x-reverse">
           {processes.map((process, index) => (
             <div
               className="flex flex-row flex-1 items-center justify-center flex-grow"
               key={index}
             >
               {process.color && (
-                <div
+                <CircleInCircle
-                  className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`}
+                  parentClassName={`${process.color} w-3 h-3`}
-                ></div>
+                  childClassName={false}
+                />
+                // <div
+                //   className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`}
+                // ></div>
               )}
-              <p className="text-xs bg-blue-400">{process.name}</p>
+              <p className="text-xs mr-2">{process.name}</p>
-              <span className="text-xs mr-2 ">{process.content}</span>
+              <span className="text-xs mr-1">{process.content}</span>
             </div>
           ))}
         </div>
         {/* middle */}
-        <div className="flex flex-col p-4 my-5 mr-5">
+        <div className="flex flex-col justify-center flex-1 p-4 gap-y-4 bg-white">
-          <h2 className="text-lg  font-bold">{title}</h2>
+          <h2 className="text-xl font-bold text-[#046AE8]">{title}</h2>
-          <p className="text-sm text-justify leading-6 mt-3">{hint}</p>
+          <p className="text-sm text-justify leading-6 text-[#00253A]">
+            {hint}
+          </p>
         </div>
         {/* bottom */}
         <div className="flex flex-row item-center justify-around p-3 bg-gray-200 rounded ">
-          {/* right */}
+          {buttons.map((btn, index) => (
-          <Button
+            <Button
-            text={"ویرایش"}
+              key={index}
-            icon={ax}
+              className={`${btn.className} rounded-md px-2 py-2 text-sm`}
-            iconHolderClassName={""}
+              iconHolderClassName={"bg-transparent mr-1"}
-            iconClassName={"mr-2 w-5"}
+              iconClassName={"w-5"}
-            className="p-2 bg-primary text-white text-sm rounded"
+              icon={btn.icon}
-            onClick={() => setOpenModal(true)}
+              text={btn.title}
-          />
+              subTitle={btn.subTitle}
-          {/* left */}
+            />
-          <div className="flex-1 flex flex-row items-center justify-around divide-x-2 divide-blue-400 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 ">{item.name}</p>
-                <p className="text-xs mr-1 ">{item.ans}</p>
-              </div>
-            ))}
-          </div>
         </div>
-      </div>{" "}
+      </div>
-      <img src={blogAuthorImg} alt="author" className="w-8" />
       {/* left */}
       <div className="flex flex-col justify-center p-2 border-r border-blue-400 gap-y-4">
         {options.map((option, j) => (
-          <div key={j} className="flex flex-row items-center justify-between">
+          <div
+            key={j}
+            className="flex flex-row gap-x-7 items-center justify-between"
+          >
             <div className="flex flex-row items-center">
-              <img src={option.icon} alt="icon" className="w-5" />
+              <img src={option.icon} alt="icon" className="w-6" />
-              <p className="text-xs mr-1">{option.title}</p>
+              <p className="text-xs mr-1.5 text-[#00253A]">{option.title}</p>
             </div>
-            <p className="text-xs mr-7">{option.content}</p>
+            <p className="text-xs  text-[#00253A]">{option.content}</p>
           </div>
         ))}
       </div>
@@ -93,7 +83,7 @@ const ProcessCard = ({
         >
           <Button
             text={null}
-            icon={ax}
+            icon={"images/blue-clock.svg"}
             iconHolderClassName={""}
             iconClassName={""}
             className="p-2 bg-red-600 rounded self-end"
@@ -109,14 +99,12 @@ const ProcessCard = ({
 export default ProcessCard;
 
 ProcessCard.defaultProps = {
-  blogAuthorImg: "images/blog-author.png",
-
   title: "پروسه مختلف در این قسمت قرار می گیرد",
   hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.",
 
   processes: [
     {
-      color: "bg-error",
+      color: "bg-[#51B708]",
       name: "فرایند اجرایی",
       content: 256,
     },
@@ -126,7 +114,7 @@ ProcessCard.defaultProps = {
       content: "پرداخت شده",
     },
     {
-      color: "bg-info",
+      color: "bg-[#EE1010]",
       name: "در حال انجام",
       content: 55,
     },
@@ -137,52 +125,60 @@ ProcessCard.defaultProps = {
     },
   ],
 
-  items: [
+  buttons: [
+    {
+      title: "ویرایش",
+      className: "bg-[#046AE8] text-white",
+      icon: "images/blue-edit-icon.svg",
+    },
     {
-      icon: ax,
+      title: "سوالات:",
-      name: "سوالات:",
+      className: "border border-[#046AE8] text-[#046AE8]",
-      ans: 5,
+      subTitle: "5",
+      icon: "images/blue-thick-box.svg",
     },
     {
-      icon: ax,
+      title: "چک لیست:",
-      name: "چک لیست:",
+      className: "border border-[#046AE8] text-[#046AE8]",
-      ans: "تابع دارد",
+      subTitle: "تابع دارد",
+      icon: "images/blue-thick-mark.svg",
     },
     {
-      icon: ax,
+      title: "مکاتبات:",
-      name: "مکاتبات:",
+      className: "border border-[#046AE8] text-[#046AE8]",
-      ans: "دارد",
+      subTitle: "1",
+      icon: "images/blue-email.svg",
     },
   ],
 
   options: [
     {
-      icon: "images/blog-author.png",
+      icon: "images/blue-clock.svg",
       title: "تاخیر",
       content: "5 ساعت",
     },
     {
-      icon: ax,
+      icon: "images/blue-git-icon.svg",
       title: "شرایط اجرا",
       content: "2 مورد",
     },
     {
-      icon: ax,
+      icon: "images/blue-start-function.svg",
       title: "تابع شروع",
       content: "ندارد",
     },
     {
-      icon: ax,
+      icon: "images/blue-return.svg",
-      title: "مثلث",
+      title: "مهلت",
       content: "5 ساعت",
     },
     {
-      icon: ax,
+      icon: "images/blue-thick-icon.svg",
       title: "تایید خودکار",
       content: "5 ساعت",
     },
     {
-      icon: ax,
+      icon: "images/blue-thick-clock.svg",
       title: "تابع انجام",
       content: "ندارد",
     },

src/components/CircleInCircle/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const CircleInCircle = ({ parentClassName, childClassName }) => {
+  return (
+    <div className={` ${parentClassName} w-5 h-5 rounded-full relative `}>
+      <div
+        className={`${childClassName} w-2 h-2 rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`}
+      ></div>
+    </div>
+  );
+};
+
+export default CircleInCircle;
+
+CircleInCircle.defaultProps = {
+  parentClassName: "bg-red-200",
+  childClassName: "bg-red-600",
+};