36 lines
876 B
TypeScript
36 lines
876 B
TypeScript
const TabContainer = ({
|
|
activeTab,
|
|
setActiveTab,
|
|
tabs,
|
|
}: {
|
|
activeTab: number;
|
|
setActiveTab: (value: number) => void;
|
|
tabs: string[];
|
|
}) => {
|
|
return (
|
|
<div className="w-full flex gap-8 justify-center pb-[2px] border-b mt-2">
|
|
{tabs.map((tab, index) => (
|
|
<div
|
|
key={index}
|
|
onClick={() => setActiveTab(index)}
|
|
onKeyDown={() => {}}
|
|
role="button"
|
|
tabIndex={index}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<p
|
|
className={`text-B12 border-b-[2px] font-bold px-2 transition-all duration-300 ease-in-out ${
|
|
index === activeTab
|
|
? "text-BLACK border-BLACK"
|
|
: "text-GRAY border-transparent"
|
|
}`}
|
|
>
|
|
{tab}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
export default TabContainer;
|