extract components from website

apps/website/components/sponsors/RenewalAlert.tsx

@@ -0,0 +1,41 @@
+import { Trophy, Users, Car, Flag, Megaphone } from 'lucide-react';
+import Button from '@/components/ui/Button';
+
+interface RenewalAlertProps {
+  renewal: {
+    id: string;
+    type: 'league' | 'team' | 'driver' | 'race' | 'platform';
+    name: string;
+    formattedRenewDate: string;
+    formattedPrice: string;
+  };
+}
+
+export default function RenewalAlert({ renewal }: RenewalAlertProps) {
+  const typeIcons = {
+    league: Trophy,
+    team: Users,
+    driver: Car,
+    race: Flag,
+    platform: Megaphone,
+  };
+  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">
+          Renew
+        </Button>
+      </div>
+    </div>
+  );
+}