c06f0c89e5
New TabKpis component shows scope-aware metrics with trend arrows aligned right in the content tab bar. Each metric shows current value and an arrow indicating change vs previous period (green=good, red=bad). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
30 lines
731 B
TypeScript
30 lines
731 B
TypeScript
import { Tabs } from '@cameleer/design-system';
|
|
import type { TabKey, Scope } from '../hooks/useScope';
|
|
import { TabKpis } from './TabKpis';
|
|
import styles from './ContentTabs.module.css';
|
|
|
|
const TABS = [
|
|
{ label: 'Exchanges', value: 'exchanges' },
|
|
{ label: 'Dashboard', value: 'dashboard' },
|
|
{ label: 'Runtime', value: 'runtime' },
|
|
];
|
|
|
|
interface ContentTabsProps {
|
|
active: TabKey;
|
|
onChange: (tab: TabKey) => void;
|
|
scope: Scope;
|
|
}
|
|
|
|
export function ContentTabs({ active, onChange, scope }: ContentTabsProps) {
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<Tabs
|
|
tabs={TABS}
|
|
active={active}
|
|
onChange={(v) => onChange(v as TabKey)}
|
|
/>
|
|
<TabKpis scope={scope} />
|
|
</div>
|
|
);
|
|
}
|