Files
xkhofmann-tfdidesign-md11-l…/PackageSources/js-bundle/src/components/tabbar/Tabbar.tsx
T
2025-06-09 07:02:26 +02:00

28 lines
766 B
TypeScript

import { FC } from 'react';
interface TabbarProps {
tabs: string[];
selectedTab: number;
setSelectedTab: (tab: number) => void;
}
const Tabbar: FC<TabbarProps> = ({ tabs, selectedTab, setSelectedTab }) => {
return (
<ul className="mb-4 flex list-none flex-row flex-wrap border-b-0 pl-0">
{tabs.map((tab, i) => (
<li key={`${tab}-${i}`}>
<button
key={i}
className={`${selectedTab === i ? 'text-white underline' : 'text-neutral-500'} my-2 block border-x-0 border-b-2 border-t-0 border-slate-100 bg-zinc-900 px-7 text-sm font-medium uppercase`}
onClick={() => setSelectedTab(i)}
>
{tab}
</button>
</li>
))}
</ul>
);
};
export default Tabbar;