feat(ui): add ContentTabs component (Exchanges | Dashboard | Runtime)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
5
ui/src/components/ContentTabs.module.css
Normal file
5
ui/src/components/ContentTabs.module.css
Normal file
@@ -0,0 +1,5 @@
|
||||
.wrapper {
|
||||
padding: 0 1.5rem;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
26
ui/src/components/ContentTabs.tsx
Normal file
26
ui/src/components/ContentTabs.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { SegmentedTabs } from '@cameleer/design-system';
|
||||
import type { TabKey } from '../hooks/useScope';
|
||||
import styles from './ContentTabs.module.css';
|
||||
|
||||
const TABS = [
|
||||
{ label: 'Exchanges', value: 'exchanges' as const },
|
||||
{ label: 'Dashboard', value: 'dashboard' as const },
|
||||
{ label: 'Runtime', value: 'runtime' as const },
|
||||
];
|
||||
|
||||
interface ContentTabsProps {
|
||||
active: TabKey;
|
||||
onChange: (tab: TabKey) => void;
|
||||
}
|
||||
|
||||
export function ContentTabs({ active, onChange }: ContentTabsProps) {
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<SegmentedTabs
|
||||
tabs={TABS}
|
||||
active={active}
|
||||
onChange={(v) => onChange(v as TabKey)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user