File size: 1,406 Bytes
6111b2b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | "use client";
import React, { useState } from "react";
import { cn } from "@/shared/utils/cn";
interface Tab {
label: string;
content: React.ReactNode;
}
interface TabsProps {
tabs: Tab[];
defaultIndex?: number;
className?: string;
}
export default function Tabs({ tabs, defaultIndex = 0, className }: TabsProps) {
const [activeIndex, setActiveIndex] = useState(defaultIndex);
return (
<div className={cn("my-6 flex flex-col gap-2", className)} role="tablist">
<div className="flex gap-1 border-b border-border">
{tabs.map((tab, index) => (
<button
key={index}
role="tab"
aria-selected={activeIndex === index}
aria-controls={`tab-panel-${index}`}
onClick={() => setActiveIndex(index)}
className={cn(
"px-4 py-2 text-sm font-medium transition-colors",
activeIndex === index
? "text-text-primary border-b-2 border-primary"
: "text-text-muted hover:text-text-main"
)}
>
{tab.label}
</button>
))}
</div>
<div
id={`tab-panel-${activeIndex}`}
role="tabpanel"
className="p-4 rounded-lg bg-bg-subtle border border-border"
>
{tabs[activeIndex].content}
</div>
</div>
);
}
|