This repository has been archived on 2022-05-10. You can view files and clone it, but cannot push or open issues or pull requests.
tghandbook/lib/components/TabList.tsx

39 lines
796 B
TypeScript

import * as React from "react";
export interface TabListItem {
page: string;
}
export interface TabListProps {
tabs: TabListItem[];
active: number;
tabClicked: (TabListItem, number) => void;
}
function TabItem({ name, active, onClick }) {
const clickHandler = active ? null : onClick;
return (
<div
className={active ? "tab active" : "tab clickable"}
onClick={clickHandler}
>
{name.replace(/_/gi, " ")}
</div>
);
}
export default function TabList({ tabs, active, tabClicked }: TabListProps) {
return (
<nav className="tab-list">
{tabs.map((tab, i) => (
<TabItem
key={tab.page}
name={tab.page}
active={i == active}
onClick={() => tabClicked(tab, i)}
/>
))}
</nav>
);
}