extract components from website

apps/website/components/dashboard/LeagueStandingItem.tsx

@@ -0,0 +1,54 @@
+import Link from 'next/link';
+import { Crown, ChevronRight } from 'lucide-react';
+
+interface LeagueStandingItemProps {
+  leagueId: string;
+  leagueName: string;
+  position: number;
+  points: number;
+  totalDrivers: number;
+  className?: string;
+}
+
+export function LeagueStandingItem({
+  leagueId,
+  leagueName,
+  position,
+  points,
+  totalDrivers,
+  className,
+}: LeagueStandingItemProps) {
+  return (
+    <Link
+      href={`/leagues/${leagueId}/standings`}
+      className={`flex items-center gap-4 p-4 rounded-xl bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/30 transition-colors group ${className || ''}`}
+    >
+      <div className={`flex h-12 w-12 items-center justify-center rounded-xl font-bold text-xl ${
+        position === 1 ? 'bg-yellow-400/20 text-yellow-400' :
+        position === 2 ? 'bg-gray-300/20 text-gray-300' :
+        position === 3 ? 'bg-orange-400/20 text-orange-400' :
+        'bg-iron-gray text-gray-400'
+      }`}>
+        {position > 0 ? `P${position}` : '-'}
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
+          {leagueName}
+        </p>
+        <p className="text-sm text-gray-500">
+          {points} points • {totalDrivers} drivers
+        </p>
+      </div>
+      <div className="flex items-center gap-2">
+        {position <= 3 && position > 0 && (
+          <Crown className={`w-5 h-5 ${
+            position === 1 ? 'text-yellow-400' :
+            position === 2 ? 'text-gray-300' :
+            'text-orange-400'
+          }`} />
+        )}
+        <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors" />
+      </div>
+    </Link>
+  );
+}