website refactor

apps/website/components/leaderboards/DriverLeaderboardPreview.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useRouter } from 'next/navigation';
 import { Trophy, Crown, Flag, ChevronRight } from 'lucide-react';
 import Button from '@/components/ui/Button';
 import Image from 'next/image';
@@ -17,6 +16,7 @@ interface DriverLeaderboardPreviewProps {
     position: number;
   }[];
   onDriverClick: (id: string) => void;
+  onNavigateToDrivers: () => void;
 }
 
 const SKILL_LEVELS = [
@@ -26,8 +26,7 @@ const SKILL_LEVELS = [
   { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
 ];
 
-export default function DriverLeaderboardPreview({ drivers, onDriverClick }: DriverLeaderboardPreviewProps) {
-  const router = useRouter();
+export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToDrivers }: DriverLeaderboardPreviewProps) {
   const top10 = drivers.slice(0, 10);
 
   const getMedalColor = (position: number) => {
@@ -50,7 +49,6 @@ export default function DriverLeaderboardPreview({ drivers, onDriverClick }: Dri
 
   return (
     <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
-      {/* Header */}
       <div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
         <div className="flex items-center gap-3">
           <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
@@ -63,7 +61,7 @@ export default function DriverLeaderboardPreview({ drivers, onDriverClick }: Dri
         </div>
         <Button
           variant="secondary"
-          onClick={() => router.push('/leaderboards/drivers')}
+          onClick={onNavigateToDrivers}
           className="flex items-center gap-2 text-sm"
         >
           View All
@@ -71,7 +69,6 @@ export default function DriverLeaderboardPreview({ drivers, onDriverClick }: Dri
         </Button>
       </div>
 
-      {/* Leaderboard Rows */}
       <div className="divide-y divide-charcoal-outline/50">
         {top10.map((driver, index) => {
           const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
@@ -84,17 +81,14 @@ export default function DriverLeaderboardPreview({ drivers, onDriverClick }: Dri
               onClick={() => onDriverClick(driver.id)}
               className="flex items-center gap-4 px-5 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
             >
-              {/* Position */}
               <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
                 {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
               </div>
 
-              {/* Avatar */}
               <div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
                 <Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
               </div>
 
-              {/* Info */}
               <div className="flex-1 min-w-0">
                 <p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
                   {driver.name}
@@ -106,7 +100,6 @@ export default function DriverLeaderboardPreview({ drivers, onDriverClick }: Dri
                 </div>
               </div>
 
-              {/* Stats */}
               <div className="flex items-center gap-4 text-sm">
                 <div className="text-center">
                   <p className="text-primary-blue font-mono font-semibold">{driver.rating.toLocaleString()}</p>