diff --git a/src/admin/ui/Pagination.tsx b/src/admin/ui/Pagination.tsx new file mode 100644 index 0000000..03e26c1 --- /dev/null +++ b/src/admin/ui/Pagination.tsx @@ -0,0 +1,26 @@ +import Box from "@mui/material/Box"; +import MuiPagination from "@mui/material/Pagination"; + +/** Centered pager. Renders nothing for a single page. */ +export default function Pagination({ + page, + pageCount, + onChange, +}: { + page: number; + pageCount: number; + onChange: (p: number) => void; +}) { + if (pageCount <= 1) return null; + return ( + + onChange(p)} + color="primary" + shape="rounded" + /> + + ); +} diff --git a/src/admin/ui/Tabs.tsx b/src/admin/ui/Tabs.tsx new file mode 100644 index 0000000..f5ca30b --- /dev/null +++ b/src/admin/ui/Tabs.tsx @@ -0,0 +1,51 @@ +import type { ReactNode } from "react"; +import MuiTabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; +import Box from "@mui/material/Box"; + +export interface TabDef { + value: string; + label: string; +} + +/** Tab bar over MUI Tabs. Pair with for the content. */ +export function Tabs({ + value, + onChange, + tabs, +}: { + value: string; + onChange: (v: string) => void; + tabs: TabDef[]; +}) { + return ( + onChange(v)} + sx={{ + borderBottom: 1, + borderColor: "divider", + minHeight: 44, + "& .MuiTab-root": { textTransform: "none", fontWeight: 600 }, + }} + > + {tabs.map((t) => ( + + ))} + + ); +} + +/** Renders children only when its value matches the current tab. */ +export function TabPanel({ + value, + current, + children, +}: { + value: string; + current: string; + children: ReactNode; +}) { + if (value !== current) return null; + return {children}; +} diff --git a/src/admin/ui/index.ts b/src/admin/ui/index.ts index 279df9c..02a9527 100644 --- a/src/admin/ui/index.ts +++ b/src/admin/ui/index.ts @@ -12,3 +12,6 @@ export type { SelectOption } from "./Select"; export { default as StatusChip } from "./StatusChip"; export { CheckboxField } from "./Checkbox"; export { default as Alert } from "./Alert"; +export { Tabs, TabPanel } from "./Tabs"; +export type { TabDef } from "./Tabs"; +export { default as Pagination } from "./Pagination";