website refactor

apps/website/components/sponsors/SponsorStatusChip.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { 
+  Check, 
+  Clock, 
+  ThumbsUp, 
+  ThumbsDown, 
+  XCircle,
+  AlertTriangle
+} from 'lucide-react';
+
+export type SponsorStatus = 'active' | 'pending' | 'approved' | 'declined' | 'expired' | 'warning';
+
+interface SponsorStatusChipProps {
+  status: SponsorStatus;
+  label?: string;
+}
+
+const STATUS_CONFIG = {
+  active: { icon: Check, color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active' },
+  pending: { icon: Clock, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Pending' },
+  approved: { icon: ThumbsUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', label: 'Approved' },
+  declined: { icon: ThumbsDown, color: 'text-racing-red', bgColor: 'bg-racing-red/10', label: 'Declined' },
+  expired: { icon: XCircle, color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Expired' },
+  warning: { icon: AlertTriangle, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Action Required' },
+};
+
+/**
+ * SponsorStatusChip
+ * 
+ * Semantic status indicator for sponsorship states.
+ * Follows the "Precision Racing Minimal" theme with instrument-grade feedback.
+ */
+export function SponsorStatusChip({ status, label }: SponsorStatusChipProps) {
+  const config = STATUS_CONFIG[status];
+  
+  return (
+    <Box 
+      px={2.5} 
+      py={1} 
+      rounded="full" 
+      bg={config.bgColor as string} 
+      border 
+      borderColor="border-charcoal-outline/30"
+      display="inline-block"
+    >
+      <Stack direction="row" align="center" gap={1.5}>
+        <Icon icon={config.icon} size={3} color={config.color as string} />
+        <Text 
+          size="xs" 
+          weight="bold" 
+          color={config.color as string} 
+          uppercase 
+          letterSpacing="wider"
+        >
+          {label || config.label}
+        </Text>
+      </Stack>
+    </Box>
+  );
+}