Record tab strip with optional per-tab counts. One record with many faces rather than many screens. The underline marks position and the label carries the meaning, so it stays legible without colour.
Loading preview...
import { useState } from 'react'
import TabStrip from '@/components/ui/crash-claim-tab-strip'
export default function TabStripDemo() {
const [tab, setTab] = useState('summary')
const tabs = [
{ key: 'summary', label: 'Summary' },
{ key: 'parties', label: 'Parties', count: 3 },
{ key: 'vehicle', label: 'Vehicle' },
{ key: 'assessment', label: 'Assessment' },
{ key: 'documents', label: 'Documents', count: 2 },
{ key: 'timeline', label: 'Timeline' },
]
return (
<div style={{ padding: 24, background: '#F4F7FA' }}>
<TabStrip tabs={tabs} active={tab} onSelect={setTab} />
<p style={{ marginTop: 16, fontFamily: 'system-ui', fontSize: 14, color: '#69727D' }}>
Showing the {tabs.find((t) => t.key === tab)?.label.toLowerCase()} face of this record.
</p>
</div>
)
}