website refactor

apps/website/components/leagues/SponsorshipRequestCard.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import React from 'react';
+import { CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface SponsorshipRequest {
+  id: string;
+  sponsorName: string;
+  status: 'pending' | 'approved' | 'rejected';
+  requestedAt: string;
+  slotName: string;
+}
+
+interface SponsorshipRequestCardProps {
+  request: SponsorshipRequest;
+}
+
+export function SponsorshipRequestCard({ request }: SponsorshipRequestCardProps) {
+  const statusVariant = {
+    pending: 'warning' as const,
+    approved: 'success' as const,
+    rejected: 'danger' as const,
+  }[request.status];
+
+  const statusIcon = {
+    pending: AlertCircle,
+    approved: CheckCircle,
+    rejected: XCircle,
+  }[request.status];
+
+  const statusColor = {
+    pending: '#f59e0b',
+    approved: '#10b981',
+    rejected: '#ef4444',
+  }[request.status];
+
+  return (
+    <Surface
+      variant="muted"
+      rounded="lg"
+      border
+      padding={4}
+      style={{ 
+        backgroundColor: `${statusColor}0D`,
+        borderColor: statusColor
+      }}
+    >
+      <Stack direction="row" align="start" justify="between">
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Stack direction="row" align="center" gap={3} mb={2}>
+            <Icon icon={statusIcon} size={5} color={statusColor} />
+            <Text weight="semibold" color="text-white">{request.sponsorName}</Text>
+            <Badge variant={statusVariant}>
+              {request.status}
+            </Badge>
+          </Stack>
+
+          <Text size="sm" color="text-gray-300" block mb={2}>
+            Requested: {request.slotName}
+          </Text>
+
+          <Text size="xs" color="text-gray-400" block>
+            {new Date(request.requestedAt).toLocaleDateString()}
+          </Text>
+        </Box>
+      </Stack>
+    </Surface>
+  );
+}