43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import React from "react";
|
|
|
|
interface Tab {
|
|
label: string;
|
|
value: string;
|
|
content: React.ReactNode;
|
|
}
|
|
|
|
interface CustomTabsProps {
|
|
tabs: Tab[];
|
|
defaultValue?: string;
|
|
onValueChange?: (value: string) => void;
|
|
}
|
|
|
|
export function CustomTabs({ tabs, defaultValue, onValueChange }: CustomTabsProps) {
|
|
const [activeTab, setActiveTab] = React.useState(defaultValue || tabs[0]?.value || '');
|
|
|
|
const handleTabChange = (value: string) => {
|
|
setActiveTab(value);
|
|
if (onValueChange) {
|
|
onValueChange(value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="flex border-b border-[#6d9e37]">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.value}
|
|
className={`px-4 py-2 font-medium text-sm focus:outline-none ${activeTab === tab.value ? 'border-x border-t border-[#6d9e37] text-[#6d9e37] rounded-t-md' : 'text-[#c7cccb]'}`}
|
|
onClick={() => handleTabChange(tab.value)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="py-4">
|
|
{tabs.find((tab) => tab.value === activeTab)?.content}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |