website refactor

apps/website/components/leagues/SponsorshipSlotCard.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import React from 'react';
+import { DollarSign } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Badge } from '@/ui/Badge';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface SponsorshipSlot {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  currency: string;
+  isAvailable: boolean;
+  sponsoredBy?: {
+    name: string;
+  };
+}
+
+interface SponsorshipSlotCardProps {
+  slot: SponsorshipSlot;
+}
+
+export function SponsorshipSlotCard({ slot }: SponsorshipSlotCardProps) {
+  return (
+    <Surface
+      variant="muted"
+      rounded="lg"
+      border
+      padding={4}
+      style={{ 
+        backgroundColor: slot.isAvailable ? 'rgba(16, 185, 129, 0.05)' : 'rgba(38, 38, 38, 0.3)',
+        borderColor: slot.isAvailable ? '#10b981' : '#262626'
+      }}
+    >
+      <Stack gap={3}>
+        <Stack direction="row" align="start" justify="between">
+          <Heading level={4}>{slot.name}</Heading>
+          <Badge variant={slot.isAvailable ? 'success' : 'default'}>
+            {slot.isAvailable ? 'Available' : 'Taken'}
+          </Badge>
+        </Stack>
+
+        <Text size="sm" color="text-gray-300" block>{slot.description}</Text>
+
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={DollarSign} size={4} color="#9ca3af" />
+          <Text weight="semibold" color="text-white">
+            {slot.price} {slot.currency}
+          </Text>
+        </Stack>
+
+        {!slot.isAvailable && slot.sponsoredBy && (
+          <Box pt={3} style={{ borderTop: '1px solid #262626' }}>
+            <Text size="xs" color="text-gray-400" block mb={1}>Sponsored by</Text>
+            <Text size="sm" weight="medium" color="text-white">{slot.sponsoredBy.name}</Text>
+          </Box>
+        )}
+      </Stack>
+    </Surface>
+  );
+}