You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

78 lines
1.9 KiB

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";
import Settingss from "../Settingss";
import Tavabee from "../Tavabee";
const Tabbar = ({ tabs }) => {
const [activeTab, setActiveTab] = useState();
return (
<div className="flex flex-col ">
<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 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?.components}
</div>
</div>
);
};
export default Tabbar;
Tabbar.defaultProps = {
tabs: [
{
title: "تنظیمات",
className: "rounded-tr-md rounded-br-md border-r-2",
components: <Settingss />,
active: true,
},
{
title: "سوالات",
className: "",
components: <Questions />,
active: false,
},
{
title: "چک لیست",
className: "",
components: <Checklist />,
active: false,
},
{
title: "مکاتبات",
className: "",
components: <Mokatebat />,
active: false,
},
{
title: "توابع",
className: "",
components: <Tavabee />,
active: false,
},
{
title: "شرایط و اجرا",
className: "rounded-tl-md rounded-bl-md border-l-2",
components: <Condition />,
active: false,
},
],
};