update src/components/CustomSelectBox/index.js, src/components/Modal/index.js, src/components/Tabbar/index.js and src/components/Tavabee/index.js ادامه کار

src/components/Condition/index.js

@@ -0,0 +1,59 @@
+import React from "react";
+import CustomSelectBox from "../CustomSelectBox";
+
+const Condition = () => {
+  return (
+    <div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-[#E3E3E3] divide-x-reverse">
+      <div className="flex-grow flex-1 flex flex-col pl-5 ">
+        <div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]">
+          اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "}
+        </div>
+      </div>
+      <div className="flex-grow flex-1 flex flex-col pr-5">
+        <div className="flex flex-col gap-y-7">
+          <CustomSelectBox
+            options={[
+              { title: "محدودیت شبکه" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <CustomSelectBox
+            options={[
+              {
+                title:
+                  "شناسه فرآیندهایی که باعث ابطال وظایف با فرآیند های فعلی می شود",
+              },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <CustomSelectBox
+            options={[
+              {
+                title: "رفرنس هایی که شناسه ی آن ها ظروری است",
+              },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <CustomSelectBox
+            options={[
+              {
+                title: "رفرنس هایی که باید در یک گردش کار یکتا باشند",
+              },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Condition;

src/components/CustomSelectBox/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const CustomSelectBox = ({ options }) => {
   return (
-    <select className="customizeSelect rounded text-xs text-black font-bold py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent">
+    <select className="customizeSelect rounded text-xs text-[#00253A] py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent">
       {options.map((option, index) => (
         <option className="text-black" key={index}>
           {option.title}

src/components/Modal/index.js

@@ -19,7 +19,7 @@ const 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"}
+      ${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}
     `}
       >
         <div className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm ">
@@ -28,7 +28,7 @@ const Modal = () => {
             onClick={(e) => e.stopPropagation()}
           >
             <Button
-              className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm"
+              className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm mb-7"
               text={false}
               icon={"images/white-cancel.svg"}
               iconHolderClassName={"mr-0"}

src/components/Tabbar/index.js

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
 import Button from "../Button";
+import Condition from "../Condition";
 import Tavabee from "../Tavabee";
 
 const Tabbar = ({ tabs }) => {
   const [activeTab, setActiveTab] = useState();
 
   return (
-    <div className="flex flex-col mt-7">
+    <div className="flex flex-col">
       <div className="flex items-center">
         {tabs.map((tab, index) => (
           <Button
@@ -16,7 +17,7 @@ const Tabbar = ({ tabs }) => {
               activeTab === tab
                 ? "bg-[#F1F3FF] text-[#3C58EA]"
                 : "bg-white text-[#333333]"
-            } w-full p-3 text-sm font-bold border border-b-2 border-t-2 border-[#3C58EA]`}
+            } w-full p-3  text-sm border border-b-2 border-t-2 border-[#3C58EA]`}
             icon={activeTab === tab ? "images/blue-correct-thick-icon.svg" : ""}
             onClick={() => setActiveTab(tab)}
           />
@@ -38,7 +39,7 @@ Tabbar.defaultProps = {
     {
       title: "تنظیمات",
       className: "rounded-tr-md rounded-br-md border-r-2",
-      components: <Tavabee />,
+      components: "mahdiii",
       bg: "bg-transparent",
     },
     {
@@ -62,14 +63,14 @@ Tabbar.defaultProps = {
     {
       title: "توابع",
       className: "",
-      components: "mahdiii",
+      components: <Tavabee />,
-      bg: "bg-blue-500",
+      bg: "bg-transparent",
     },
     {
       title: "شرایط و اجرا",
       className: "rounded-tl-md rounded-bl-md border-l-2",
-      components: "mahdiii",
+      components: <Condition />,
-      bg: "bg-blue-500",
+      bg: "bg-transparent",
     },
   ],
 };

src/components/Tavabee/index.js

@@ -7,13 +7,43 @@ const Tavabee = () => {
       <div className="flex-grow flex-1 flex flex-col pl-5">
         <p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p>
         <div className="flex flex-col gap-y-7">
-          <CustomSelectBox /> <CustomSelectBox />
+          <CustomSelectBox
+            options={[
+              { title: "انتخاب سرویس" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <CustomSelectBox
+            options={[
+              { title: "انتخاب تابع" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
         </div>
       </div>
       <div className="flex-grow flex-1 flex flex-col pr-5">
-        <p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p>
+        <p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع پایان</p>
         <div className="flex flex-col gap-y-7">
-          <CustomSelectBox /> <CustomSelectBox />
+          <CustomSelectBox
+            options={[
+              { title: "انتخاب سرویس" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <CustomSelectBox
+            options={[
+              { title: "انتخاب تابع" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
         </div>
       </div>
     </div>