extract components from website

apps/website/app/sponsor/dashboard/page.tsx

@@ -6,6 +6,10 @@ import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import StatusBadge from '@/components/ui/StatusBadge';
 import InfoBanner from '@/components/ui/InfoBanner';
+import MetricCard from '@/components/sponsors/MetricCard';
+import SponsorshipCategoryCard from '@/components/sponsors/SponsorshipCategoryCard';
+import ActivityItem from '@/components/sponsors/ActivityItem';
+import RenewalAlert from '@/components/sponsors/RenewalAlert';
 import {
   BarChart3,
   Eye,
@@ -35,146 +39,9 @@ import { SponsorService } from '@/lib/services/sponsors/SponsorService';
 import { SponsorDashboardViewModel } from '@/lib/view-models/SponsorDashboardViewModel';
 import { ServiceFactory } from '@/lib/services/ServiceFactory';
 
-// Metric Card Component
-function MetricCard({ 
-  title, 
-  value, 
-  change, 
-  icon: Icon,
-  suffix = '',
-  prefix = '',
-  delay = 0,
-}: { 
-  title: string; 
-  value: number | string; 
-  change?: number;
-  icon: typeof Eye;
-  suffix?: string;
-  prefix?: string;
-  delay?: number;
-}) {
-  const shouldReduceMotion = useReducedMotion();
-  const isPositive = change && change > 0;
-  const isNegative = change && change < 0;
 
-  return (
-    <motion.div
-      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ delay }}
-    >
-      <Card className="p-5 h-full">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary-blue/10">
-            <Icon className="w-5 h-5 text-primary-blue" />
-          </div>
-          {change !== undefined && (
-            <div className={`flex items-center gap-1 text-sm font-medium ${
-              isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
-            }`}>
-              {isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
-              {Math.abs(change)}%
-            </div>
-          )}
-        </div>
-        <div className="text-2xl font-bold text-white mb-1">
-          {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
-        </div>
-        <div className="text-sm text-gray-400">{title}</div>
-      </Card>
-    </motion.div>
-  );
-}
 
-// Sponsorship Category Card
-function SponsorshipCategoryCard({ 
-  icon: Icon, 
-  title, 
-  count, 
-  impressions, 
-  color, 
-  href 
-}: { 
-  icon: typeof Trophy; 
-  title: string; 
-  count: number; 
-  impressions: number;
-  color: string;
-  href: string;
-}) {
-  return (
-    <Link href={href}>
-      <Card className="p-4 hover:border-primary-blue/50 transition-all duration-300 cursor-pointer group">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className={`w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center group-hover:bg-primary-blue/10 transition-colors`}>
-              <Icon className={`w-5 h-5 ${color}`} />
-            </div>
-            <div>
-              <p className="text-white font-medium">{title}</p>
-              <p className="text-sm text-gray-500">{count} active</p>
-            </div>
-          </div>
-          <div className="text-right">
-            <p className="text-white font-semibold">{impressions.toLocaleString()}</p>
-            <p className="text-xs text-gray-500">impressions</p>
-          </div>
-        </div>
-      </Card>
-    </Link>
-  );
-}
 
-// Activity Item
-function ActivityItem({ activity }: { activity: any }) {
-  return (
-    <div className="flex items-start gap-3 py-3 border-b border-charcoal-outline/50 last:border-b-0">
-      <div className={`w-2 h-2 rounded-full mt-2 ${activity.typeColor}`} />
-      <div className="flex-1 min-w-0">
-        <p className="text-sm text-white truncate">{activity.message}</p>
-        <div className="flex items-center gap-2 mt-1">
-          <span className="text-xs text-gray-500">{activity.time}</span>
-          {activity.formattedImpressions && (
-            <>
-              <span className="text-xs text-gray-600">•</span>
-              <span className="text-xs text-gray-400">{activity.formattedImpressions} views</span>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Renewal Alert
-function RenewalAlert({ renewal }: { renewal: any }) {
-  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>
-  );
-}
 
 export default function SponsorDashboardPage() {
   const shouldReduceMotion = useReducedMotion();