51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface TelemetryItem {
|
|
label: string;
|
|
value: string | number;
|
|
trend?: 'up' | 'down' | 'neutral';
|
|
color?: string;
|
|
}
|
|
|
|
interface TelemetryStripProps {
|
|
items: TelemetryItem[];
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* TelemetryStrip
|
|
*
|
|
* A thin, dense strip showing key telemetry or performance metrics.
|
|
* Follows the "Precision Racing Minimal" theme.
|
|
*/
|
|
export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
|
|
return (
|
|
<Box
|
|
className={`bg-graphite-black/80 border-y border-border-gray/30 py-2 px-4 flex items-center gap-8 overflow-x-auto no-scrollbar ${className}`}
|
|
>
|
|
{items.map((item, index) => (
|
|
<Stack key={index} direction="row" align="center" gap={2} className="whitespace-nowrap">
|
|
<Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
|
|
{item.label}
|
|
</Text>
|
|
<Text
|
|
size="sm"
|
|
weight="bold"
|
|
style={{ color: item.color || '#4ED4E0' }}
|
|
className="font-mono"
|
|
>
|
|
{item.value}
|
|
</Text>
|
|
{item.trend && (
|
|
<Text size="xs" style={{ color: item.trend === 'up' ? '#10b981' : item.trend === 'down' ? '#ef4444' : '#94a3b8' }}>
|
|
{item.trend === 'up' ? '↑' : item.trend === 'down' ? '↓' : '•'}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|