website refactor

apps/website/components/sponsors/RenewalAlert.tsx

@@ -1,5 +1,9 @@
-import { Trophy, Users, Car, Flag, Megaphone } from 'lucide-react';
-import Button from '@/components/ui/Button';
+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';
 
 interface RenewalAlertProps {
   renewal: {
@@ -11,8 +15,8 @@ interface RenewalAlertProps {
   };
 }
 
-export default function RenewalAlert({ renewal }: RenewalAlertProps) {
-  const typeIcons = {
+export function RenewalAlert({ renewal }: RenewalAlertProps) {
+  const typeIcons: Record<string, LucideIcon> = {
     league: Trophy,
     team: Users,
     driver: Car,
@@ -22,20 +26,20 @@ export default function RenewalAlert({ renewal }: RenewalAlertProps) {
   const Icon = typeIcons[renewal.type] || Trophy;
 
   return (
-    <div className="flex items-center justify-between p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
-      <div className="flex items-center gap-3">
-        <Icon className="w-4 h-4 text-warning-amber" />
-        <div>
-          <p className="text-sm text-white">{renewal.name}</p>
-          <p className="text-xs text-gray-400">Renews {renewal.formattedRenewDate}</p>
-        </div>
-      </div>
-      <div className="text-right">
-        <p className="text-sm font-semibold text-white">{renewal.formattedPrice}</p>
-        <Button variant="secondary" className="text-xs mt-1 py-1 px-2 min-h-0">
+    <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>
-      </div>
-    </div>
+      </Box>
+    </Stack>
   );
-}
+}