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", + }, + ], +};