website refactor

apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { getMediaUrl } from '@/lib/utilities/media';
+import { TeamLeaderboardItem } from '@/ui/TeamLeaderboardItem';
+import { TeamLeaderboardPreview as UiTeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreview';
+
+interface TeamLeaderboardPreviewProps {
+  topTeams: Array<{
+    id: string;
+    name: string;
+    logoUrl?: string;
+    category?: string;
+    memberCount: number;
+    totalWins: number;
+    isRecruiting: boolean;
+    rating?: number;
+    performanceLevel: string;
+  }>;
+  onTeamClick: (id: string) => void;
+  onViewFullLeaderboard: () => void;
+}
+
+export function TeamLeaderboardPreview({
+  topTeams,
+  onTeamClick,
+  onViewFullLeaderboard
+}: TeamLeaderboardPreviewProps) {
+  const getMedalColor = (position: number) => {
+    switch (position) {
+      case 0: return '#facc15';
+      case 1: return '#d1d5db';
+      case 2: return '#d97706';
+      default: return '#6b7280';
+    }
+  };
+
+  const getMedalBg = (position: number) => {
+    switch (position) {
+      case 0: return 'rgba(250, 204, 21, 0.1)';
+      case 1: return 'rgba(209, 213, 219, 0.1)';
+      case 2: return 'rgba(217, 119, 6, 0.1)';
+      default: return 'rgba(38, 38, 38, 0.5)';
+    }
+  };
+
+  const getMedalBorder = (position: number) => {
+    switch (position) {
+      case 0: return 'rgba(250, 204, 21, 0.3)';
+      case 1: return 'rgba(209, 213, 219, 0.3)';
+      case 2: return 'rgba(217, 119, 6, 0.3)';
+      default: return 'rgba(38, 38, 38, 1)';
+    }
+  };
+
+  if (topTeams.length === 0) return null;
+
+  return (
+    <UiTeamLeaderboardPreview
+      title="Top Teams"
+      subtitle="Highest rated racing teams"
+      onViewFull={onViewFullLeaderboard}
+    >
+      {topTeams.map((team, index) => (
+        <TeamLeaderboardItem
+          key={team.id}
+          position={index + 1}
+          name={team.name}
+          logoUrl={team.logoUrl || getMediaUrl('team-logo', team.id)}
+          category={team.category}
+          memberCount={team.memberCount}
+          totalWins={team.totalWins}
+          isRecruiting={team.isRecruiting}
+          rating={team.rating}
+          onClick={() => onTeamClick(team.id)}
+          medalColor={getMedalColor(index)}
+          medalBg={getMedalBg(index)}
+          medalBorder={getMedalBorder(index)}
+        />
+      ))}
+    </UiTeamLeaderboardPreview>
+  );
+}