diff --git a/public/images/blue-correct-thick-icon.svg b/public/images/blue-correct-thick-icon.svg
new file mode 100644
index 0000000..3cc8973
--- /dev/null
+++ b/public/images/blue-correct-thick-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
index ef25ff9..e7c90bb 100644
--- a/src/components/Modal/index.js
+++ b/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 = () => {
`}
>
e.stopPropagation()}
>
diff --git a/src/components/Tabbar/index.js b/src/components/Tabbar/index.js
new file mode 100644
index 0000000..67384a3
--- /dev/null
+++ b/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 (
+
+
+ {tabs.map((tab, index) => (
+
+
+ {activeTab?.components}
+
+
+ );
+};
+
+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",
+ },
+ ],
+};