website refactor

apps/website/templates/DriverRankingsTemplate.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import React from 'react';
-import { Trophy } from 'lucide-react';
+import { Trophy, ChevronLeft } from 'lucide-react';
 import { Container } from '@/ui/Container';
-import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
-import { LeaderboardHeader } from '@/components/leaderboards/LeaderboardHeader';
+import { PageHeader } from '@/ui/PageHeader';
+import { RankingsPodium } from '@/components/leaderboards/RankingsPodium';
+import { RankingsTable } from '@/components/leaderboards/RankingsTable';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
 import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
-import { LeaderboardPodium } from '@/components/leaderboards/LeaderboardPodium';
-import { LeaderboardTable } from '@/components/leaderboards/LeaderboardTable';
+import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
 
 interface DriverRankingsTemplateProps {
   viewData: DriverRankingsViewData;
@@ -26,17 +28,26 @@ export function DriverRankingsTemplate({
 }: DriverRankingsTemplateProps): React.ReactElement {
   return (
     <Container size="lg" py={8}>
-      <LeaderboardHeader
+      <PageHeader
         title="Driver Leaderboard"
         description="Full rankings of all drivers by performance metrics"
         icon={Trophy}
-        onBack={onBackToLeaderboards}
-        backLabel="Back to Leaderboards"
+        action={
+          onBackToLeaderboards && (
+            <Button 
+              variant="secondary" 
+              onClick={onBackToLeaderboards} 
+              icon={<Icon icon={ChevronLeft} size={4} />}
+            >
+              Back to Leaderboards
+            </Button>
+          )
+        }
       />
 
       {/* Top 3 Podium */}
       {viewData.podium.length > 0 && !searchQuery && (
-        <LeaderboardPodium 
+        <RankingsPodium 
           podium={viewData.podium.map(d => ({
             ...d,
             rating: Number(d.rating),
@@ -54,7 +65,7 @@ export function DriverRankingsTemplate({
       />
 
       {/* Leaderboard Table */}
-      <LeaderboardTable 
+      <RankingsTable 
         drivers={viewData.drivers.map(d => ({
           ...d,
           rating: Number(d.rating),