import * as React from "react"; import { I18nText, UiLogicError } from "@/common"; import Tabs from "./Tabs"; export interface TabPage { name: string; text: I18nText; page: React.ReactNode; } export interface TabPagesProps { pages: TabPage[]; actions?: React.ReactNode; dense?: boolean; className?: string; style?: React.CSSProperties; navClassName?: string; navStyle?: React.CSSProperties; pageContainerClassName?: string; pageContainerStyle?: React.CSSProperties; } const TabPages: React.FC = ({ pages, actions, dense, className, style, navClassName, navStyle, pageContainerClassName, pageContainerStyle, }) => { if (pages.length === 0) { throw new UiLogicError("Page list can't be empty."); } const [tab, setTab] = React.useState(pages[0].name); const currentPage = pages.find((p) => p.name === tab); if (currentPage == null) { throw new UiLogicError("Current tab value is bad."); } return (
({ name: page.name, text: page.text, onClick: () => { setTab(page.name); }, }))} dense={dense} activeTabName={tab} className={navClassName} style={navStyle} actions={actions} />
{currentPage.page}
); }; export default TabPages;