37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import clsx from "clsx";
|
|
import styles from "./TabBar.module.scss";
|
|
import Typography from "../Typography/Typography";
|
|
|
|
export type Tab<T extends string> = {
|
|
label: string;
|
|
value: T;
|
|
};
|
|
|
|
type TabBarProps<T extends string> = {
|
|
tabs: Tab<T>[];
|
|
active: T;
|
|
onChange: (value: T) => void;
|
|
className?: string;
|
|
};
|
|
|
|
export default function TabBar<T extends string>({ tabs, active, onChange, className }: TabBarProps<T>) {
|
|
return (
|
|
<nav className={clsx(styles.tabBar, className)}>
|
|
{tabs.map((tab) => {
|
|
const isActive = tab.value === active;
|
|
return (
|
|
<button
|
|
key={tab.value}
|
|
className={clsx(styles.tab, { [styles.active]: isActive })}
|
|
onClick={() => onChange(tab.value)}
|
|
type="button"
|
|
>
|
|
<Typography color={isActive ? "black" : "secondary"} size="md" weight="semiBold">
|
|
{tab.label}
|
|
</Typography>
|
|
</button>
|
|
)
|
|
})}
|
|
</nav >
|
|
);
|
|
} |