50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import React, { FunctionComponent, useState, ReactNode } from "react";
|
|
import style from "./style.module.css";
|
|
|
|
export interface TabItem {
|
|
label: string
|
|
icon?: string
|
|
render: () => ReactNode
|
|
}
|
|
|
|
export interface TabsProps {
|
|
class?: string
|
|
items: TabItem[]
|
|
}
|
|
|
|
const Tabs: FunctionComponent<TabsProps> = ({ items, ...props }) => {
|
|
const [ selectedTabIndex, setSelectedTabIndex ] = useState(0);
|
|
|
|
const onTabClick = (tabIndex: number) => {
|
|
setSelectedTabIndex(tabIndex);
|
|
};
|
|
|
|
const selectedTab = items[selectedTabIndex];
|
|
|
|
return (
|
|
<div className={`${style.tabs} ${props.class}`}>
|
|
<div className="tabs">
|
|
<ul className={`noPrint`}>
|
|
{
|
|
items.map((tabItem, tabIndex) => (
|
|
<li key={`tab-${tabIndex}`}
|
|
onClick={onTabClick.bind(null, tabIndex)}
|
|
className={`${selectedTabIndex === tabIndex ? 'is-active' : ''}`}>
|
|
<a>
|
|
<span className="icon is-small">{tabItem.icon}</span>
|
|
{tabItem.label}
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
<div className={style.tabContent}>
|
|
{ selectedTab.render() }
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Tabs;
|