tghandbook/lib/components/TabList.tsx

39 lines
796 B
TypeScript
Raw Normal View History

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