website refactor

apps/website/client-wrapper/TeamLeaderboardPageWrapper.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { TeamLeaderboardTemplate } from '@/templates/TeamLeaderboardTemplate';
+import { useState } from 'react';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
+
+export function TeamLeaderboardPageWrapper({ data }: { data: TeamSummaryViewModel[] | null }) {
+  const router = useRouter();
+  
+  // Client-side UI state only (no business logic)
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
+  const [sortBy, setSortBy] = useState<SortBy>('rating');
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  const handleTeamClick = (teamId: string) => {
+    router.push(`/teams/${teamId}`);
+  };
+
+  const handleBackToTeams = () => {
+    router.push('/teams');
+  };
+
+  const viewData = {
+    teams: data,
+    searchQuery,
+    filterLevel,
+    sortBy,
+    filteredAndSortedTeams: data,
+  };
+
+  return (
+    <TeamLeaderboardTemplate
+      viewData={viewData}
+      onSearchChange={setSearchQuery}
+      filterLevelChange={setFilterLevel}
+      onSortChange={setSortBy}
+      onTeamClick={handleTeamClick}
+      onBackToTeams={handleBackToTeams}
+    />
+  );
+}