tghandbook/lib/components/TabList.tsx

29 lines
534 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;
}
function TabItem({ name, active }) {
return (
<div className={active ? "tab active" : "tab"}>
{name.replace(/_/gi, " ")}
</div>
);
}
export default function TabList({ tabs, active }: TabListProps) {
return (
<nav className="tab-list">
{tabs.map((tab, i) => (
<TabItem name={tab.page} active={i == active} />
))}
</nav>
);
}