website refactor

apps/website/ui/StatsStrip.tsx

@@ -0,0 +1,42 @@
+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>
+  );
+}