website refactor
This commit is contained in:
@@ -1,51 +1,14 @@
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Image from 'next/image';
|
||||
import { Award, ChevronRight, Crown, Trophy, Users } from 'lucide-react';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
import Button from '@/components/ui/Button';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
'use client';
|
||||
|
||||
const SKILL_LEVELS: {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
borderColor: string;
|
||||
}[] = [
|
||||
{
|
||||
id: 'pro',
|
||||
label: 'Pro',
|
||||
icon: () => null,
|
||||
color: 'text-yellow-400',
|
||||
bgColor: 'bg-yellow-400/10',
|
||||
borderColor: 'border-yellow-400/30',
|
||||
},
|
||||
{
|
||||
id: 'advanced',
|
||||
label: 'Advanced',
|
||||
icon: () => null,
|
||||
color: 'text-purple-400',
|
||||
bgColor: 'bg-purple-400/10',
|
||||
borderColor: 'border-purple-400/30',
|
||||
},
|
||||
{
|
||||
id: 'intermediate',
|
||||
label: 'Intermediate',
|
||||
icon: () => null,
|
||||
color: 'text-primary-blue',
|
||||
bgColor: 'bg-primary-blue/10',
|
||||
borderColor: 'border-primary-blue/30',
|
||||
},
|
||||
{
|
||||
id: 'beginner',
|
||||
label: 'Beginner',
|
||||
icon: () => null,
|
||||
color: 'text-green-400',
|
||||
bgColor: 'bg-green-400/10',
|
||||
borderColor: 'border-green-400/30',
|
||||
},
|
||||
];
|
||||
import React from 'react';
|
||||
import { Award, ChevronRight, Crown, Trophy, Users } from 'lucide-react';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Image } from '@/ui/Image';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
|
||||
interface TeamLeaderboardPreviewProps {
|
||||
topTeams: Array<{
|
||||
@@ -60,140 +23,161 @@ interface TeamLeaderboardPreviewProps {
|
||||
performanceLevel: string;
|
||||
}>;
|
||||
onTeamClick: (id: string) => void;
|
||||
onViewFullLeaderboard: () => void;
|
||||
}
|
||||
|
||||
export default function TeamLeaderboardPreview({
|
||||
export function TeamLeaderboardPreview({
|
||||
topTeams,
|
||||
onTeamClick
|
||||
onTeamClick,
|
||||
onViewFullLeaderboard
|
||||
}: TeamLeaderboardPreviewProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const getMedalColor = (position: number) => {
|
||||
switch (position) {
|
||||
case 0:
|
||||
return 'text-yellow-400';
|
||||
case 1:
|
||||
return 'text-gray-300';
|
||||
case 2:
|
||||
return 'text-amber-600';
|
||||
default:
|
||||
return 'text-gray-500';
|
||||
case 0: return '#facc15';
|
||||
case 1: return '#d1d5db';
|
||||
case 2: return '#d97706';
|
||||
default: return '#6b7280';
|
||||
}
|
||||
};
|
||||
|
||||
const getMedalBg = (position: number) => {
|
||||
switch (position) {
|
||||
case 0:
|
||||
return 'bg-yellow-400/10 border-yellow-400/30';
|
||||
case 1:
|
||||
return 'bg-gray-300/10 border-gray-300/30';
|
||||
case 2:
|
||||
return 'bg-amber-600/10 border-amber-600/30';
|
||||
default:
|
||||
return 'bg-iron-gray/50 border-charcoal-outline';
|
||||
case 0: return 'rgba(250, 204, 21, 0.1)';
|
||||
case 1: return 'rgba(209, 213, 219, 0.1)';
|
||||
case 2: return 'rgba(217, 119, 6, 0.1)';
|
||||
default: return 'rgba(38, 38, 38, 0.5)';
|
||||
}
|
||||
};
|
||||
|
||||
const getMedalBorder = (position: number) => {
|
||||
switch (position) {
|
||||
case 0: return 'rgba(250, 204, 21, 0.3)';
|
||||
case 1: return 'rgba(209, 213, 219, 0.3)';
|
||||
case 2: return 'rgba(217, 119, 6, 0.3)';
|
||||
default: return 'rgba(38, 38, 38, 1)';
|
||||
}
|
||||
};
|
||||
|
||||
if (topTeams.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mb-12">
|
||||
<Box style={{ marginBottom: '3rem' }}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
|
||||
<Award className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white">Top Teams</h2>
|
||||
<p className="text-sm text-gray-500">Highest rated racing teams</p>
|
||||
</div>
|
||||
</div>
|
||||
<Stack direction="row" align="center" justify="between" style={{ marginBottom: '1rem' }}>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<Box style={{ display: 'flex', height: '2.75rem', width: '2.75rem', alignItems: 'center', justifyContent: 'center', borderRadius: '0.75rem', background: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}>
|
||||
<Award style={{ width: '1.25rem', height: '1.25rem', color: '#facc15' }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={2}>Top Teams</Heading>
|
||||
<Text size="sm" color="text-gray-500">Highest rated racing teams</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => router.push(routes.team.detail('leaderboard'))}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
onClick={onViewFullLeaderboard}
|
||||
style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.875rem' }}
|
||||
>
|
||||
View Full Leaderboard
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<ChevronRight style={{ width: '1rem', height: '1rem' }} />
|
||||
</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
{/* Compact Leaderboard */}
|
||||
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{topTeams.map((team, index) => {
|
||||
const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={team.id}
|
||||
type="button"
|
||||
onClick={() => onTeamClick(team.id)}
|
||||
className="flex items-center gap-4 px-4 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
||||
<Box style={{ borderRadius: '0.75rem', backgroundColor: 'rgba(38, 38, 38, 0.3)', border: '1px solid #262626', overflow: 'hidden' }}>
|
||||
<Stack gap={0}>
|
||||
{topTeams.map((team, index) => (
|
||||
<Box
|
||||
key={team.id}
|
||||
as="button"
|
||||
type="button"
|
||||
onClick={() => onTeamClick(team.id)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
padding: '0.75rem 1rem',
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
borderBottom: index < topTeams.length - 1 ? '1px solid rgba(38, 38, 38, 0.5)' : 'none'
|
||||
}}
|
||||
>
|
||||
{/* Position */}
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
height: '2rem',
|
||||
width: '2rem',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: '9999px',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 'bold',
|
||||
border: `1px solid ${getMedalBorder(index)}`,
|
||||
backgroundColor: getMedalBg(index),
|
||||
color: getMedalColor(index)
|
||||
}}
|
||||
>
|
||||
{/* Position */}
|
||||
<div
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${getMedalBg(index)} ${getMedalColor(index)}`}
|
||||
>
|
||||
{index < 3 ? (
|
||||
<Crown className="w-3.5 h-3.5" />
|
||||
) : (
|
||||
index + 1
|
||||
{index < 3 ? (
|
||||
<Crown style={{ width: '0.875rem', height: '0.875rem' }} />
|
||||
) : (
|
||||
index + 1
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Team Info */}
|
||||
<Box style={{ display: 'flex', height: '2.25rem', width: '2.25rem', alignItems: 'center', justifyContent: 'center', borderRadius: '0.5rem', backgroundColor: '#262626', border: '1px solid #262626', overflow: 'hidden' }}>
|
||||
<Image
|
||||
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
||||
alt={team.name}
|
||||
width={36}
|
||||
height={36}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
</Box>
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text weight="medium" color="text-white" style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{team.name}
|
||||
</Text>
|
||||
<Stack direction="row" align="center" gap={2} wrap style={{ marginTop: '0.125rem' }}>
|
||||
{team.category && (
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Box style={{ width: '0.375rem', height: '0.375rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
|
||||
<Text size="xs" color="text-purple-400">{team.category}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Users style={{ width: '0.75rem', height: '0.75rem', color: '#737373' }} />
|
||||
<Text size="xs" color="text-gray-500">{team.memberCount}</Text>
|
||||
</Stack>
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Trophy style={{ width: '0.75rem', height: '0.75rem', color: '#737373' }} />
|
||||
<Text size="xs" color="text-gray-500">{team.totalWins} wins</Text>
|
||||
</Stack>
|
||||
{team.isRecruiting && (
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Box style={{ width: '0.375rem', height: '0.375rem', borderRadius: '9999px', backgroundColor: '#10b981' }} />
|
||||
<Text size="xs" color="text-performance-green">Recruiting</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Team Info */}
|
||||
<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)}
|
||||
alt={team.name}
|
||||
width={36}
|
||||
height={36}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
|
||||
{team.name}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
|
||||
{team.category && (
|
||||
<span className="flex items-center gap-1 text-purple-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
|
||||
{team.category}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3" />
|
||||
{team.memberCount}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Trophy className="w-3 h-3" />
|
||||
{team.totalWins} wins
|
||||
</span>
|
||||
{team.isRecruiting && (
|
||||
<span className="flex items-center gap-1 text-performance-green">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />
|
||||
Recruiting
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="text-right">
|
||||
<p className="text-purple-400 font-mono font-semibold">
|
||||
{typeof team.rating === 'number' ? Math.round(team.rating).toLocaleString() : '—'}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">Rating</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Rating */}
|
||||
<Box style={{ textAlign: 'right' }}>
|
||||
<Text font="mono" weight="semibold" color="text-purple-400" style={{ display: 'block' }}>
|
||||
{typeof team.rating === 'number' ? Math.round(team.rating).toLocaleString() : '—'}
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-500">Rating</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user