website refactor

apps/website/templates/LeaderboardsTemplate.tsx

@@ -1,56 +1,46 @@
 'use client';
 
 import React from 'react';
+import { useRouter } from 'next/navigation';
 import { Trophy, Users, Award } from 'lucide-react';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
 import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
+import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
+import { routes } from '@/lib/routing/RouteConfig';
 
 // ============================================================================
 // TYPES
 // ============================================================================
 
 interface LeaderboardsTemplateProps {
-  drivers: {
-    id: string;
-    name: string;
-    rating: number;
-    skillLevel: string;
-    nationality: string;
-    wins: number;
-    rank: number;
-    avatarUrl: string;
-    position: number;
-  }[];
-  teams: {
-    id: string;
-    name: string;
-    tag: string;
-    memberCount: number;
-    category?: string;
-    totalWins: number;
-    logoUrl: string;
-    position: number;
-  }[];
-  onDriverClick: (driverId: string) => void;
-  onTeamClick: (teamId: string) => void;
-  onNavigateToDrivers: () => void;
-  onNavigateToTeams: () => void;
+  viewData: LeaderboardsViewData;
 }
 
 // ============================================================================
 // MAIN TEMPLATE COMPONENT
 // ============================================================================
 
-export function LeaderboardsTemplate({
-  drivers,
-  teams,
-  onDriverClick,
-  onTeamClick,
-  onNavigateToDrivers,
-  onNavigateToTeams,
-}: LeaderboardsTemplateProps) {
+export function LeaderboardsTemplate({ viewData }: LeaderboardsTemplateProps) {
+  const router = useRouter();
+
+  const handleDriverClick = (driverId: string) => {
+    router.push(routes.driver.detail(driverId));
+  };
+
+  const handleTeamClick = (teamId: string) => {
+    router.push(routes.team.detail(teamId));
+  };
+
+  const handleNavigateToDrivers = () => {
+    router.push(routes.leaderboards.drivers);
+  };
+
+  const handleNavigateToTeams = () => {
+    router.push(routes.team.leaderboard);
+  };
+
   return (
     <div className="max-w-7xl mx-auto px-4 pb-12">
       <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite border border-yellow-500/20 overflow-hidden">
@@ -78,7 +68,7 @@ export function LeaderboardsTemplate({
           <div className="flex flex-wrap gap-3">
             <Button
               variant="secondary"
-              onClick={onNavigateToDrivers}
+              onClick={handleNavigateToDrivers}
               className="flex items-center gap-2"
             >
               <Trophy className="w-4 h-4 text-primary-blue" />
@@ -86,7 +76,7 @@ export function LeaderboardsTemplate({
             </Button>
             <Button
               variant="secondary"
-              onClick={onNavigateToTeams}
+              onClick={handleNavigateToTeams}
               className="flex items-center gap-2"
             >
               <Users className="w-4 h-4 text-purple-400" />
@@ -97,8 +87,8 @@ export function LeaderboardsTemplate({
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <DriverLeaderboardPreview drivers={drivers} onDriverClick={onDriverClick} onNavigateToDrivers={onNavigateToDrivers} />
-        <TeamLeaderboardPreview teams={teams} onTeamClick={onTeamClick} onNavigateToTeams={onNavigateToTeams} />
+        <DriverLeaderboardPreview drivers={viewData.drivers} onDriverClick={handleDriverClick} onNavigateToDrivers={handleNavigateToDrivers} />
+        <TeamLeaderboardPreview teams={viewData.teams} onTeamClick={handleTeamClick} onNavigateToTeams={handleNavigateToTeams} />
       </div>
     </div>
   );