website refactor

apps/website/components/leaderboards/TeamLeaderboardPreview.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { Users, Crown, Shield, ChevronRight } from 'lucide-react';
 import Button from '@/components/ui/Button';
@@ -17,6 +16,7 @@ interface TeamLeaderboardPreviewProps {
     position: number;
   }[];
   onTeamClick: (id: string) => void;
+  onNavigateToTeams: () => void;
 }
 
 const SKILL_LEVELS = [
@@ -26,11 +26,8 @@ const SKILL_LEVELS = [
   { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
 ];
 
-export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeaderboardPreviewProps) {
-  const router = useRouter();
-  const top5 = [...teams]
-    .sort((a, b) => b.memberCount - a.memberCount)
-    .slice(0, 5);
+export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }: TeamLeaderboardPreviewProps) {
+  const top5 = teams.slice(0, 5);
 
   const getMedalColor = (position: number) => {
     switch (position) {
@@ -52,7 +49,6 @@ export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeade
 
   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-purple-500/20 to-purple-500/5 border border-purple-500/20">
@@ -65,7 +61,7 @@ export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeade
         </div>
         <Button
           variant="secondary"
-          onClick={() => router.push('/teams/leaderboard')}
+          onClick={onNavigateToTeams}
           className="flex items-center gap-2 text-sm"
         >
           View All
@@ -73,12 +69,11 @@ export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeade
         </Button>
       </div>
 
-      {/* Leaderboard Rows */}
       <div className="divide-y divide-charcoal-outline/50">
         {top5.map((team, index) => {
           const levelConfig = SKILL_LEVELS.find((l) => l.id === team.category);
           const LevelIcon = levelConfig?.icon || Shield;
-          const position = index + 1;
+          const position = team.position;
 
           return (
             <button
@@ -87,12 +82,10 @@ export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeade
               onClick={() => onTeamClick(team.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>
 
-              {/* Team Logo */}
               <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
                 <Image
                   src={team.logoUrl || getMediaUrl('team-logo', team.id)}
@@ -103,7 +96,6 @@ export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeade
                 />
               </div>
 
-              {/* Info */}
               <div className="flex-1 min-w-0">
                 <p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
                   {team.name}
@@ -123,7 +115,6 @@ export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeade
                 </div>
               </div>
 
-              {/* Stats */}
               <div className="flex items-center gap-4 text-sm">
                 <div className="text-center">
                   <p className="text-purple-400 font-mono font-semibold">{team.memberCount}</p>