website refactor

apps/website/components/leagues/SponsorshipSlotCard.tsx

@@ -1,12 +1,7 @@
 'use client';
 
-import { Badge } from '@/ui/Badge';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
-import { Text } from '@/ui/Text';
-import { DollarSign } from 'lucide-react';
+import { SponsorshipCard } from '@/ui/SponsorshipCard';
+import React from 'react';
 
 interface SponsorshipSlot {
   id: string;
@@ -26,42 +21,12 @@ interface SponsorshipSlotCardProps {
 
 export function SponsorshipSlotCard({ slot }: SponsorshipSlotCardProps) {
   return (
-    <Surface
-      variant="muted"
-      rounded="lg"
-      border
-      padding={4}
-      // eslint-disable-next-line gridpilot-rules/component-classification
-      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 && (
-          // eslint-disable-next-line gridpilot-rules/component-classification
-          <Stack 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>
-          </Stack>
-        )}
-      </Stack>
-    </Surface>
+    <SponsorshipCard
+      name={slot.name}
+      description={slot.description}
+      price={`${slot.price} ${slot.currency}`}
+      isAvailable={slot.isAvailable}
+      sponsoredBy={slot.sponsoredBy?.name}
+    />
   );
 }