website refactor

apps/website/components/sponsors/MetricBuilders.ts

@@ -0,0 +1,70 @@
+import { Eye, TrendingUp, Users, Star, Calendar, Zap } from 'lucide-react';
+
+export interface SponsorMetric {
+  icon: React.ElementType;
+  label: string;
+  value: string | number;
+  color?: string;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+}
+
+export const MetricBuilders = {
+  views: (value: number, label = 'Views'): SponsorMetric => ({
+    icon: Eye,
+    label,
+    value,
+    color: 'text-primary-blue',
+  }),
+  
+  engagement: (value: number | string): SponsorMetric => ({
+    icon: TrendingUp,
+    label: 'Engagement',
+    value: typeof value === 'number' ? `${value}%` : value,
+    color: 'text-performance-green',
+  }),
+  
+  reach: (value: number): SponsorMetric => ({
+    icon: Users,
+    label: 'Est. Reach',
+    value,
+    color: 'text-purple-400',
+  }),
+  
+  rating: (value: number | string, label = 'Rating'): SponsorMetric => ({
+    icon: Star,
+    label,
+    value,
+    color: 'text-warning-amber',
+  }),
+  
+  races: (value: number): SponsorMetric => ({
+    icon: Calendar,
+    label: 'Races',
+    value,
+    color: 'text-neon-aqua',
+  }),
+  
+  members: (value: number): SponsorMetric => ({
+    icon: Users,
+    label: 'Members',
+    value,
+    color: 'text-purple-400',
+  }),
+  
+  impressions: (value: number): SponsorMetric => ({
+    icon: Eye,
+    label: 'Impressions',
+    value,
+    color: 'text-primary-blue',
+  }),
+  
+  sof: (value: number | string): SponsorMetric => ({
+    icon: Zap,
+    label: 'Avg SOF',
+    value,
+    color: 'text-warning-amber',
+  }),
+};