update src/components/Tabbar/index.js

src/components/Checklist/index.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+
+import Accordion from "../Accordion";
+import CustomSelectBox from "../CustomSelectBox";
+
+const Checklist = () => {
+  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">
+        <p className=" font-bold text-blue-600 text-left text-xs mb-2">
+          تابع انتخاب
+        </p>
+        <div className="flex flex-col gap-y-4">
+          <CustomSelectBox
+            options={[
+              { title: "افزودن چک لیست" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+        </div>
+        <Accordion />
+      </div>
+      <div className="flex-grow flex-1 flex flex-col pr-5">
+        <p className="font-bold text-[#00253A] text-sm mb-4">شرایط ایجاد</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>
+        <hr className="border border-gray-200 w-full my-5" />
+        <p className="font-bold text-[#00253A] text-sm mb-4">تابع فیلتر</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>
+      </div>
+    </div>
+  );
+};
+
+export default Checklist;

src/components/Tabbar/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Button from "../Button";
+import Checklist from "../Checklist";
 import Condition from "../Condition";
 import Mokatebat from "../Mokatebat";
 import Questions from "../Questions";
@@ -54,8 +55,8 @@ Tabbar.defaultProps = {
     {
       title: "چک لیست",
       className: "",
-      components: "zlatan",
-      bg: "bg-blue-500",
+      components: <Checklist />,
+      bg: "bg-transparent",
     },
     {
       title: "مکاتبات",