website refactor

apps/website/components/sponsors/RenewalAlert.tsx

@@ -1,9 +1,8 @@
+'use client';
+
 import React from 'react';
 import { Trophy, Users, Car, Flag, Megaphone, LucideIcon } from 'lucide-react';
-import { Button } from '@/ui/Button';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { RenewalItem } from '@/ui/RenewalItem';
 
 interface RenewalAlertProps {
   renewal: {
@@ -26,20 +25,11 @@ export function RenewalAlert({ renewal }: RenewalAlertProps) {
   const Icon = typeIcons[renewal.type] || Trophy;
 
   return (
-    <Stack direction="row" align="center" justify="between" style={{ padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: 'rgba(245, 158, 11, 0.1)', border: '1px solid rgba(245, 158, 11, 0.3)' }}>
-      <Stack direction="row" align="center" gap={3}>
-        <Icon style={{ width: '1rem', height: '1rem', color: '#f59e0b' }} />
-        <Box>
-          <Text size="sm" color="text-white" style={{ display: 'block' }}>{renewal.name}</Text>
-          <Text size="xs" color="text-gray-400">Renews {renewal.formattedRenewDate}</Text>
-        </Box>
-      </Stack>
-      <Box style={{ textAlign: 'right' }}>
-        <Text size="sm" weight="semibold" color="text-white" style={{ display: 'block' }}>{renewal.formattedPrice}</Text>
-        <Button variant="secondary" style={{ fontSize: '0.75rem', marginTop: '0.25rem', padding: '0.25rem 0.5rem', minHeight: 0 }}>
-          Renew
-        </Button>
-      </Box>
-    </Stack>
+    <RenewalItem
+      name={renewal.name}
+      renewDateLabel={renewal.formattedRenewDate}
+      priceLabel={renewal.formattedPrice}
+      icon={Icon}
+    />
   );
 }