ادامه کار | ساعت کاری را در ایشو هایی که درست کردم میزارم از این به بعد

public/images/blue-correct-thick-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.021" height="13.396" viewBox="0 0 15.021 13.396">
+  <path id="Vector" d="M-.8,5.717,2.918,10.4,10.713,0" transform="translate(2.558 1.75)" fill="none" stroke="#3c58ea" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
+</svg>

src/components/Modal/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 
 import Button from "../Button";
+import Tabbar from "../Tabbar";
 import FormInput from "../FormInput";
 
 const Modal = () => {
@@ -24,16 +25,19 @@ const Modal = () => {
     `}
       >
         <div
-          className="w-1/2 flex flex-col  bg-white border border-gray-400 rounded-sm p-5"
+          className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm p-3"
           onClick={(e) => e.stopPropagation()}
         >
           <Button
-            className="bg-[#D11B1B] w-fit p-1.5 rounded-sm self-end"
+            className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm"
             text={false}
             icon={"images/white-cancel.svg"}
             iconHolderClassName={"mr-0"}
+            onClick={() => setOpenModal(false)}
           />
-          <FormInput />
+
+          <Tabbar />
+          {/* <FormInput /> */}
         </div>
       </div>
     </div>

src/components/Tabbar/index.js

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import Button from "../Button";
+
+const Tabbar = ({ tabs }) => {
+  const [activeTab, setActiveTab] = useState();
+
+  return (
+    <div className="flex flex-col mt-7">
+      <div className="flex items-center">
+        {tabs.map((tab, index) => (
+          <Button
+            key={index}
+            text={tab.title}
+            className={`${tab.className} ${
+              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]`}
+            icon={activeTab === tab ? "images/blue-correct-thick-icon.svg" : ""}
+            onClick={() => setActiveTab(tab)}
+          />
+        ))}
+      </div>
+      <div
+        className={`rounded w-full text-white flex items-center mt-5 ${activeTab?.bg}`}
+      >
+        {activeTab?.components}
+      </div>
+    </div>
+  );
+};
+
+export default Tabbar;
+
+Tabbar.defaultProps = {
+  tabs: [
+    {
+      title: "تنظیمات",
+      className: "rounded-tr-md rounded-br-md border-r-2",
+      components: "mahdi",
+      bg: "bg-blue-500",
+    },
+    {
+      title: "سوالات",
+      className: "",
+      components: "iran",
+      bg: "bg-blue-500",
+    },
+    {
+      title: "چک لیست",
+      className: "",
+      components: "zlatan",
+      bg: "bg-blue-500",
+    },
+    {
+      title: "مکاتبات",
+      className: "",
+      components: "mahdii",
+      bg: "bg-blue-500",
+    },
+    {
+      title: "توابع",
+      className: "",
+      components: "mahdiii",
+      bg: "bg-blue-500",
+    },
+    {
+      title: "شرایط و اجرا",
+      className: "rounded-tl-md rounded-bl-md border-l-2",
+      components: "mahdiii",
+      bg: "bg-blue-500",
+    },
+  ],
+};