ادامه کار | 22

public/images/white-cancel.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.305" height="13.305" viewBox="0 0 13.305 13.305">
+  <g id="Group_2176" data-name="Group 2176" transform="translate(1.061 1.061)">
+    <path id="Vector" d="M11.072,11.072,0,0" transform="translate(0.112 0)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M11.072,0,0,11.072" transform="translate(0 0.112)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>

src/components/Card/index.js

@@ -2,19 +2,15 @@ import React, { useState } from "react";
 
 import Button from "../Button";
 import CircleInCircle from "../CircleInCircle";
-
-import FormInput from "../FormInput";
+import Modal from "../Modal";
 
 const ProcessCard = ({ processes, title, hint, buttons, options }) => {
-  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">
+    <section className="w-fit mx-auto flex flex-row bg-white  border border-gray-300 rounded-md mt-5">
       {/* right */}
       <div className="flex flex-1 flex-col justify-between">
         {/* top */}
-        <div className="flex items-center p-4 bg-[#EEFCE4] rounded divide-x-2 divide-[#C7C7C7] divide-x-reverse">
+        <div className="flex items-center p-4 bg-[#EEFCE4] divide-x-2 divide-[#C7C7C7] divide-x-reverse">
           {processes.map((process, index) => (
             <div
               className="flex flex-1 items-center justify-center flex-grow"
@@ -32,7 +28,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
           ))}
         </div>
         {/* middle */}
-        <div className="flex flex-col flex-1 justify-center items-center p-4  bg-white">
+        <div className="flex flex-col flex-1 justify-center items-center p-4">
           <div className="w-[96%] flex flex-col justify-center gap-y-4">
             <h2 className="text-xl font-bold text-[#046AE8]">{title}</h2>
             <p className="text-sm text-justify leading-6 text-[#00253A]">
@@ -42,6 +38,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
         </div>
         {/* bottom */}
         <div className="flex flex-row item-center justify-around p-3 bg-[#F8F8F8] rounded ">
+          <Modal />
           {buttons.map((btn, index) => (
             <Button
               key={index}
@@ -56,7 +53,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
         </div>
       </div>
       {/* left */}
-      <div className="flex flex-col justify-center gap-y-4 p-2 bg-white border-r border-blue-400">
+      <div className="flex flex-col justify-center gap-y-4 p-2 border-r border-blue-400">
         {options.map((option, j) => (
           <div className="flex flex-col">
             <div
@@ -73,27 +70,6 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
           </div>
         ))}
       </div>
-      {/* modal */}
-      <div
-        className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
-        ${openModal ? "opacity-60" : "opacity-0 pointer-events-none"}
-      `}
-      >
-        <div
-          className="w-1/2 flex flex-col  bg-white border border-gray-400 rounded-sm p-5"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Button
-            text={null}
-            icon={"images/blue-clock.svg"}
-            iconHolderClassName={""}
-            iconClassName={""}
-            className="p-2 bg-red-600 rounded self-end"
-            onClick={() => setOpenModal(false)}
-          />
-          <FormInput />
-        </div>
-      </div>
     </section>
   );
 };
@@ -128,11 +104,6 @@ ProcessCard.defaultProps = {
   ],
 
   buttons: [
-    {
-      title: "ویرایش",
-      className: "bg-[#046AE8] text-white",
-      icon: "images/blue-edit-icon.svg",
-    },
     {
       title: "سوالات:",
       className: "border border-[#046AE8] text-[#046AE8]",

src/components/Modal/index.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+
+import Button from "../Button";
+import FormInput from "../FormInput";
+
+const Modal = () => {
+  const [openModal, setOpenModal] = useState(false);
+  console.log(openModal);
+
+  return (
+    <div>
+      <Button
+        className={`bg-[#046AE8] text-white rounded-md px-2 py-2 text-sm`}
+        iconHolderClassName={"bg-transparent mr-1"}
+        iconClassName={"w-5"}
+        icon={"images/blue-edit-icon.svg"}
+        text={"ویرایش"}
+        onClick={() => setOpenModal(true)}
+      />
+
+      <div
+        className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
+      ${openModal ? "opacity-60" : "opacity-0 pointer-events-none"}
+    `}
+      >
+        <div
+          className="w-1/2 flex flex-col  bg-white border border-gray-400 rounded-sm p-5"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button
+            className="bg-[#D11B1B] w-fit p-1.5 rounded-sm self-end"
+            text={false}
+            icon={"images/white-cancel.svg"}
+            iconHolderClassName={"mr-0"}
+          />
+          <FormInput />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;