website refactor

apps/website/templates/TeamRankingsTemplate.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { Users, ChevronLeft } from 'lucide-react';
+import { Container } from '@/ui/Container';
+import { PageHeader } from '@/ui/PageHeader';
+import { TeamLeaderboardTable } from '@/components/leaderboards/TeamLeaderboardTable';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
+import type { TeamRankingsViewData } from '@/lib/view-data/TeamRankingsViewData';
+
+interface TeamRankingsTemplateProps {
+  viewData: TeamRankingsViewData;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onTeamClick?: (id: string) => void;
+  onBackToLeaderboards?: () => void;
+}
+
+export function TeamRankingsTemplate({
+  viewData,
+  searchQuery,
+  onSearchChange,
+  onTeamClick,
+  onBackToLeaderboards,
+}: TeamRankingsTemplateProps): React.ReactElement {
+  return (
+    <Container size="lg" py={8}>
+      <PageHeader
+        title="Team Leaderboard"
+        description="Global rankings of all teams based on performance and consistency"
+        icon={Users}
+        action={
+          onBackToLeaderboards && (
+            <Button 
+              variant="secondary" 
+              onClick={onBackToLeaderboards} 
+              icon={<Icon icon={ChevronLeft} size={4} />}
+            >
+              Back to Leaderboards
+            </Button>
+          )
+        }
+      />
+
+      <LeaderboardFiltersBar 
+        searchQuery={searchQuery}
+        onSearchChange={onSearchChange}
+        placeholder="Search teams..."
+      />
+
+      <TeamLeaderboardTable 
+        teams={viewData.teams.map(t => ({
+          ...t,
+          totalRaces: t.totalRaces || 0,
+          rating: t.rating || 0
+        }))} 
+        onTeamClick={onTeamClick} 
+      />
+    </Container>
+  );
+}