update src/components/Tabbar/index.js

src/components/Mokatebat/index.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+
+import Accordion from "../Accordion";
+import Input from "../AnimatedInput/Input";
+import CustomSelectBox from "../CustomSelectBox";
+
+const Mokatebat = () => {
+  const { register, getValues } = useForm();
+
+  return (
+    <div className="w-full flex flex-row items-start justify-between mx-auto divide-x-2 divide-[#E3E3E3] divide-x-reverse">
+      <div className="flex-grow flex-1 flex flex-col pl-5">
+        <div className="flex flex-col gap-y-4">
+          <CustomSelectBox
+            options={[
+              { title: "قالب نامه" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <CustomSelectBox
+            options={[
+              { title: "جامعه هدف" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <Input
+            register={register("lastName")}
+            label="متن پیامک اطلاع رسانی"
+            type="textarea"
+            borderClassname={`border border-red-[#E3E3E3] `}
+          />
+        </div>
+        <p className=" font-bold text-[#00253A] text-sm mt-4 mb-2">
+          تابع انتخاب
+        </p>
+        <div className="flex flex-col gap-y-4">
+          <CustomSelectBox
+            options={[
+              { title: "انتخاب سرویس" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <CustomSelectBox
+            options={[
+              { title: "انتخاب تابع" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+        </div>
+        {/* <Accordion /> */}
+      </div>
+      <div className="flex-grow flex-1 flex flex-col pr-5">
+        <div>
+          <p className="font-bold text-[#00253A] text-sm">شرایط ایجاد</p>
+          <div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]">
+            اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "}
+          </div>
+        </div>
+        <div className="mt-4">
+          <p className="font-bold text-[#00253A] text-sm">شرایط امضا</p>
+          <div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]">
+            اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Mokatebat;

src/components/Tabbar/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Button from "../Button";
 import Condition from "../Condition";
+import Mokatebat from "../Mokatebat";
 import Questions from "../Questions";
 import Settingss from "../Settingss";
 import Tavabee from "../Tavabee";
@@ -59,8 +60,8 @@ Tabbar.defaultProps = {
     {
       title: "مکاتبات",
       className: "",
-      components: "mahdii",
-      bg: "bg-blue-500",
+      components: <Mokatebat />,
+      bg: "bg-transparent",
     },
     {
       title: "توابع",