43 lines
974 B
TypeScript
43 lines
974 B
TypeScript
import React from 'react';
|
|
import { Container } from './Container';
|
|
import { Grid } from './Grid';
|
|
import { MetricCard } from './MetricCard';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface StatItem {
|
|
label: string;
|
|
value: string;
|
|
icon: LucideIcon;
|
|
intent?: 'primary' | 'telemetry' | 'warning' | 'success' | 'critical';
|
|
trend?: {
|
|
value: number;
|
|
isPositive: boolean;
|
|
};
|
|
}
|
|
|
|
interface StatsStripProps {
|
|
stats: StatItem[];
|
|
}
|
|
|
|
/**
|
|
* StatsStrip - A semantic UI component for showing a strip of metrics.
|
|
*/
|
|
export function StatsStrip({ stats }: StatsStripProps) {
|
|
return (
|
|
<Container>
|
|
<Grid cols={{ base: 2, md: 4 }} gap={4}>
|
|
{stats.map((stat, index) => (
|
|
<MetricCard
|
|
key={index}
|
|
label={stat.label}
|
|
value={stat.value}
|
|
icon={stat.icon}
|
|
intent={stat.intent as any}
|
|
trend={stat.trend}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
);
|
|
}
|