You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
727 B
TypeScript
27 lines
727 B
TypeScript
/** Underline tabs with optional mono counts (Direction A v2 pattern). */
|
|
|
|
export interface TabDef { key: string; label: string; count?: number }
|
|
|
|
export function Tabs(props: {
|
|
tabs: TabDef[]
|
|
active: string
|
|
onChange: (key: string) => void
|
|
}) {
|
|
return (
|
|
<div className="wf-tabs">
|
|
{props.tabs.map((t) => (
|
|
<button
|
|
key={t.key}
|
|
type="button"
|
|
aria-current={t.key === props.active ? 'true' : undefined}
|
|
className={`wf-tab${t.key === props.active ? ' active' : ''}`}
|
|
onClick={() => props.onChange(t.key)}
|
|
>
|
|
{t.label}
|
|
{t.count !== undefined && <span className="count">{t.count}</span>}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|