website refactor
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Button from '@/ui/Button';
|
||||
import Input from '@/ui/Input';
|
||||
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
|
||||
import { useCreateTeam } from "@/lib/hooks/team";
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/ui/Button';
|
||||
import Button from '@/ui/Button';
|
||||
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
|
||||
import { useTeamMembership, useJoinTeam, useLeaveTeam } from "@/lib/hooks/team";
|
||||
import { useState } from 'react';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { ChevronRight, Users, Trophy, UserPlus } from 'lucide-react';
|
||||
import TeamCard from './TeamCard';
|
||||
import { TeamCard } from './TeamCard';
|
||||
|
||||
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
||||
type TeamSpecialization = 'endurance' | 'sprint' | 'mixed';
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Card from '@/ui/Card';
|
||||
import Button from '@/ui/Button';
|
||||
import Input from '@/ui/Input';
|
||||
import { useTeamJoinRequests, useUpdateTeam, useApproveJoinRequest, useRejectJoinRequest } from "@/lib/hooks/team";
|
||||
import type { TeamJoinRequestViewModel } from '@/lib/view-models/TeamJoinRequestViewModel';
|
||||
|
||||
|
||||
@@ -1,23 +1,27 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import React from 'react';
|
||||
import {
|
||||
Users,
|
||||
Trophy,
|
||||
Award,
|
||||
Crown,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Shield,
|
||||
ChevronRight,
|
||||
UserPlus,
|
||||
Zap,
|
||||
Clock,
|
||||
Globe,
|
||||
Languages,
|
||||
Crown,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Shield
|
||||
} from 'lucide-react';
|
||||
|
||||
import PlaceholderImage from '@/components/ui/PlaceholderImage';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import { Image } from '@/ui/Image';
|
||||
import PlaceholderImage from '@/ui/PlaceholderImage';
|
||||
|
||||
interface TeamCardProps {
|
||||
id: string;
|
||||
@@ -41,13 +45,13 @@ interface TeamCardProps {
|
||||
function getPerformanceBadge(level?: string) {
|
||||
switch (level) {
|
||||
case 'pro':
|
||||
return { icon: Crown, label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20 border-yellow-500/30' };
|
||||
return { icon: Crown, label: 'Pro', variant: 'warning' as const };
|
||||
case 'advanced':
|
||||
return { icon: Star, label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-500/20 border-purple-500/30' };
|
||||
return { icon: Star, label: 'Advanced', variant: 'primary' as const };
|
||||
case 'intermediate':
|
||||
return { icon: TrendingUp, label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/20 border-primary-blue/30' };
|
||||
return { icon: TrendingUp, label: 'Intermediate', variant: 'info' as const };
|
||||
case 'beginner':
|
||||
return { icon: Shield, label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-500/20 border-green-500/30' };
|
||||
return { icon: Shield, label: 'Beginner', variant: 'success' as const };
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
@@ -56,16 +60,15 @@ function getPerformanceBadge(level?: string) {
|
||||
function getSpecializationBadge(specialization?: string) {
|
||||
switch (specialization) {
|
||||
case 'endurance':
|
||||
return { icon: Clock, label: 'Endurance', color: 'text-orange-400' };
|
||||
return { icon: Clock, label: 'Endurance', color: '#f97316' };
|
||||
case 'sprint':
|
||||
return { icon: Zap, label: 'Sprint', color: 'text-neon-aqua' };
|
||||
return { icon: Zap, label: 'Sprint', color: '#00f2ff' };
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default function TeamCard({
|
||||
id,
|
||||
export function TeamCard({
|
||||
name,
|
||||
description,
|
||||
logo,
|
||||
@@ -81,142 +84,132 @@ export default function TeamCard({
|
||||
category,
|
||||
onClick,
|
||||
}: TeamCardProps) {
|
||||
const logoUrl = logo;
|
||||
const performanceBadge = getPerformanceBadge(performanceLevel);
|
||||
const specializationBadge = getSpecializationBadge(specialization);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group relative cursor-pointer h-full"
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* Card Container */}
|
||||
<div className="relative h-full rounded-xl bg-iron-gray border border-charcoal-outline overflow-hidden transition-all duration-200 hover:border-purple-500/50 hover:shadow-[0_0_30px_rgba(168,85,247,0.15)] hover:bg-iron-gray/80 flex flex-col">
|
||||
<Box onClick={onClick} style={{ height: '100%', cursor: 'pointer' }}>
|
||||
<Card style={{ height: '100%', padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
{/* Header with Logo */}
|
||||
<div className="relative p-4 pb-0">
|
||||
<div className="flex items-start gap-4">
|
||||
<Box style={{ padding: '1rem', paddingBottom: 0 }}>
|
||||
<Stack direction="row" align="start" gap={4}>
|
||||
{/* Logo */}
|
||||
<div className="w-14 h-14 rounded-xl bg-charcoal-outline flex items-center justify-center flex-shrink-0 overflow-hidden border border-charcoal-outline">
|
||||
{logoUrl ? (
|
||||
<Box style={{ width: '3.5rem', height: '3.5rem', borderRadius: '0.75rem', backgroundColor: '#262626', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', border: '1px solid #262626' }}>
|
||||
{logo ? (
|
||||
<Image
|
||||
src={logoUrl}
|
||||
src={logo}
|
||||
alt={name}
|
||||
width={56}
|
||||
height={56}
|
||||
className="w-full h-full object-cover"
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<PlaceholderImage size={56} />
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Title & Badges */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="text-base font-semibold text-white truncate group-hover:text-purple-400 transition-colors">
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Stack direction="row" align="start" justify="between" gap={2}>
|
||||
<Heading level={3} style={{ fontSize: '1rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{name}
|
||||
</h3>
|
||||
</Heading>
|
||||
{isRecruiting && (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-performance-green/20 text-performance-green border border-performance-green/30 whitespace-nowrap">
|
||||
<UserPlus className="w-3 h-3" />
|
||||
<Badge variant="success">
|
||||
<UserPlus style={{ width: '0.75rem', height: '0.75rem' }} />
|
||||
Recruiting
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
{/* Performance Level & Category */}
|
||||
<div className="mt-1.5 flex items-center gap-2 flex-wrap">
|
||||
<Stack direction="row" align="center" gap={2} wrap style={{ marginTop: '0.375rem' }}>
|
||||
{performanceBadge && (
|
||||
<span className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ${performanceBadge.bgColor}`}>
|
||||
<performanceBadge.icon className={`w-3 h-3 ${performanceBadge.color}`} />
|
||||
<span className={performanceBadge.color}>{performanceBadge.label}</span>
|
||||
</span>
|
||||
<Badge variant={performanceBadge.variant}>
|
||||
<performanceBadge.icon style={{ width: '0.75rem', height: '0.75rem' }} />
|
||||
{performanceBadge.label}
|
||||
</Badge>
|
||||
)}
|
||||
{specializationBadge && (
|
||||
<span className="flex items-center gap-1 text-[10px] text-gray-500">
|
||||
<specializationBadge.icon className={`w-3 h-3 ${specializationBadge.color}`} />
|
||||
{specializationBadge.label}
|
||||
</span>
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<specializationBadge.icon style={{ width: '0.75rem', height: '0.75rem', color: specializationBadge.color }} />
|
||||
<Text size="xs" color="text-gray-500">{specializationBadge.label}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
{category && (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-purple-500/20 border border-purple-500/30 text-purple-400">
|
||||
<span className="w-2 h-2 rounded-full bg-purple-400"></span>
|
||||
<Badge variant="primary">
|
||||
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
|
||||
{category}
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4 flex flex-col flex-1">
|
||||
<Box style={{ padding: '1rem', display: 'flex', flexDirection: 'column', flex: 1 }}>
|
||||
{/* Description */}
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mb-3">
|
||||
<Text size="xs" color="text-gray-500" style={{ marginBottom: '0.75rem', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
|
||||
{description || 'No description available'}
|
||||
</p>
|
||||
</Text>
|
||||
|
||||
{/* Region & Languages */}
|
||||
{(region || (languages && languages.length > 0)) && (
|
||||
<div className="flex flex-wrap items-center gap-2 mb-3">
|
||||
<Stack direction="row" align="center" gap={2} wrap style={{ marginBottom: '0.75rem' }}>
|
||||
{region && (
|
||||
<span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] bg-charcoal-outline/50 text-gray-400 border border-charcoal-outline/30">
|
||||
<Globe className="w-3 h-3 text-neon-aqua" />
|
||||
{region}
|
||||
</span>
|
||||
<Box style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', borderRadius: '0.375rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid rgba(38, 38, 38, 0.3)' }}>
|
||||
<Globe style={{ width: '0.75rem', height: '0.75rem', color: '#00f2ff' }} />
|
||||
<Text size="xs" color="text-gray-400">{region}</Text>
|
||||
</Box>
|
||||
)}
|
||||
{languages && languages.length > 0 && (
|
||||
<span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] bg-charcoal-outline/50 text-gray-400 border border-charcoal-outline/30">
|
||||
<Languages className="w-3 h-3 text-purple-400" />
|
||||
{languages.slice(0, 2).join(', ')}
|
||||
{languages.length > 2 && ` +${languages.length - 2}`}
|
||||
</span>
|
||||
<Box style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', borderRadius: '0.375rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid rgba(38, 38, 38, 0.3)' }}>
|
||||
<Languages style={{ width: '0.75rem', height: '0.75rem', color: '#a855f7' }} />
|
||||
<Text size="xs" color="text-gray-400">
|
||||
{languages.slice(0, 2).join(', ')}
|
||||
{languages.length > 2 && ` +${languages.length - 2}`}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
<div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
|
||||
<div className="text-[10px] text-gray-500 mb-0.5">Rating</div>
|
||||
<div className="text-sm font-semibold text-primary-blue">
|
||||
{typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
|
||||
<div className="text-[10px] text-gray-500 mb-0.5">Wins</div>
|
||||
<div className="text-sm font-semibold text-performance-green">
|
||||
{totalWins ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
|
||||
<div className="text-[10px] text-gray-500 mb-0.5">Races</div>
|
||||
<div className="text-sm font-semibold text-white">
|
||||
{totalRaces ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Box style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '0.5rem', marginBottom: '1rem' }}>
|
||||
<StatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} color="#3b82f6" />
|
||||
<StatItem label="Wins" value={totalWins ?? 0} color="#10b981" />
|
||||
<StatItem label="Races" value={totalRaces ?? 0} color="white" />
|
||||
</Box>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
<Box style={{ flex: 1 }} />
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50 mt-auto">
|
||||
<div className="flex items-center gap-2 text-[10px] text-gray-500">
|
||||
<Users className="w-3 h-3" />
|
||||
<span>
|
||||
<Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: '0.75rem', borderTop: '1px solid rgba(38, 38, 38, 0.5)', marginTop: 'auto' }}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Users style={{ width: '0.75rem', height: '0.75rem', color: '#737373' }} />
|
||||
<Text size="xs" color="text-gray-500">
|
||||
{memberCount} {memberCount === 1 ? 'member' : 'members'}
|
||||
</span>
|
||||
</div>
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
{/* View Arrow */}
|
||||
<div className="flex items-center gap-1 text-[10px] text-gray-500 group-hover:text-purple-400 transition-colors">
|
||||
<span>View</span>
|
||||
<ChevronRight className="w-3 h-3 transition-transform group-hover:translate-x-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Text size="xs" color="text-gray-500">View</Text>
|
||||
<ChevronRight style={{ width: '0.75rem', height: '0.75rem', color: '#737373' }} />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ label, value, color }: { label: string, value: string | number, color: string }) {
|
||||
return (
|
||||
<Box style={{ textAlign: 'center', padding: '0.5rem', borderRadius: '0.5rem', backgroundColor: 'rgba(38, 38, 38, 0.3)' }}>
|
||||
<Text size="xs" color="text-gray-500" style={{ display: 'block', marginBottom: '0.125rem' }}>{label}</Text>
|
||||
<Text size="sm" weight="semibold" style={{ color }}>{value}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
83
apps/website/components/teams/TeamHero.tsx
Normal file
83
apps/website/components/teams/TeamHero.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { ExternalLink } from 'lucide-react';
|
||||
import { Card } from '@/ui/Card';
|
||||
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 { Surface } from '@/ui/Surface';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import JoinTeamButton from '@/components/teams/JoinTeamButton';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
|
||||
interface TeamHeroProps {
|
||||
team: {
|
||||
id: string;
|
||||
name: string;
|
||||
tag: string | null;
|
||||
description?: string;
|
||||
category?: string | null;
|
||||
createdAt?: string;
|
||||
leagues: any[];
|
||||
};
|
||||
memberCount: number;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
|
||||
return (
|
||||
<Card>
|
||||
<Stack direction="row" align="start" justify="between" wrap gap={6}>
|
||||
<Stack direction="row" align="start" gap={6} wrap style={{ flex: 1 }}>
|
||||
<Surface variant="muted" rounded="lg" padding={1} style={{ width: '6rem', height: '6rem', overflow: 'hidden', backgroundColor: '#262626' }}>
|
||||
<Image
|
||||
src={getMediaUrl('team-logo', team.id)}
|
||||
alt={team.name}
|
||||
width={96}
|
||||
height={96}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
</Surface>
|
||||
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Stack direction="row" align="center" gap={3} mb={2}>
|
||||
<Heading level={1}>{team.name}</Heading>
|
||||
{team.tag && (
|
||||
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#262626', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
||||
<Text size="xs" color="text-gray-300">[{team.tag}]</Text>
|
||||
</Surface>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Text color="text-gray-300" block mb={4} style={{ maxWidth: '42rem' }}>{team.description}</Text>
|
||||
|
||||
<Stack direction="row" align="center" gap={4} wrap style={{ fontSize: '0.875rem', color: '#9ca3af' }}>
|
||||
<Text size="sm">{memberCount} {memberCount === 1 ? 'member' : 'members'}</Text>
|
||||
{team.category && (
|
||||
<Stack direction="row" align="center" gap={1.5}>
|
||||
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
|
||||
<Text size="sm" color="text-purple-400">{team.category}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
{team.createdAt && (
|
||||
<Text size="sm">
|
||||
Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
||||
</Text>
|
||||
)}
|
||||
{team.leagues && team.leagues.length > 0 && (
|
||||
<Text size="sm">
|
||||
Active in {team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -10,8 +10,8 @@ import {
|
||||
Shield,
|
||||
UserPlus,
|
||||
} from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import Button from '@/ui/Button';
|
||||
import Heading from '@/ui/Heading';
|
||||
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
||||
|
||||
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
128
apps/website/components/teams/TeamRankingsTable.tsx
Normal file
128
apps/website/components/teams/TeamRankingsTable.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Medal, Users, Globe, Languages } from 'lucide-react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Image } from '@/ui/Image';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
|
||||
interface Team {
|
||||
id: string;
|
||||
name: string;
|
||||
logoUrl?: string;
|
||||
performanceLevel: string;
|
||||
category?: string;
|
||||
region?: string;
|
||||
languages?: string[];
|
||||
isRecruiting?: boolean;
|
||||
memberCount: number;
|
||||
totalWins: number;
|
||||
totalRaces: number;
|
||||
}
|
||||
|
||||
interface TeamRankingsTableProps {
|
||||
teams: Team[];
|
||||
sortBy: string;
|
||||
onTeamClick: (id: string) => void;
|
||||
}
|
||||
|
||||
export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTableProps) {
|
||||
return (
|
||||
<Box style={{ borderRadius: '0.75rem', backgroundColor: 'rgba(38, 38, 38, 0.3)', border: '1px solid #262626', overflow: 'hidden' }}>
|
||||
{/* Table Header */}
|
||||
<Box style={{ display: 'grid', gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', gap: '1rem', padding: '0.75rem 1rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderBottom: '1px solid #262626', fontSize: '0.75rem', fontWeight: 500, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||
<Box style={{ gridColumn: 'span 1', textAlign: 'center' }}>Rank</Box>
|
||||
<Box style={{ gridColumn: 'span 5' }}>Team</Box>
|
||||
<Box style={{ gridColumn: 'span 2', textAlign: 'center' }} className="hidden lg:block">Members</Box>
|
||||
<Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Rating</Box>
|
||||
<Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Wins</Box>
|
||||
</Box>
|
||||
|
||||
{/* Table Body */}
|
||||
<Stack gap={0}>
|
||||
{teams.map((team, index) => {
|
||||
const winRate = team.totalRaces > 0 ? ((team.totalWins / team.totalRaces) * 100).toFixed(1) : '0.0';
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={team.id}
|
||||
as="button"
|
||||
type="button"
|
||||
onClick={() => onTeamClick(team.id)}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
|
||||
gap: '1rem',
|
||||
padding: '1rem',
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
borderBottom: index < teams.length - 1 ? '1px solid rgba(38, 38, 38, 0.5)' : 'none'
|
||||
}}
|
||||
>
|
||||
{/* Position */}
|
||||
<Box style={{ gridColumn: 'span 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Surface variant="muted" rounded="full" padding={1} style={{ width: '2.25rem', height: '2.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#262626' }}>
|
||||
{index < 3 ? <Icon icon={Medal} size={4} /> : index + 1}
|
||||
</Surface>
|
||||
</Box>
|
||||
|
||||
{/* Team Info */}
|
||||
<Box style={{ gridColumn: 'span 5', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
<Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid #262626' }}>
|
||||
<Image
|
||||
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
||||
alt={team.name}
|
||||
width={40}
|
||||
height={40}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
</Box>
|
||||
<Box style={{ minWidth: 0, flex: 1 }}>
|
||||
<Text weight="semibold" color="text-white" block truncate>{team.name}</Text>
|
||||
<Stack direction="row" align="center" gap={2} mt={1} wrap>
|
||||
<Text size="xs" color="text-gray-500">{team.performanceLevel}</Text>
|
||||
{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>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Members */}
|
||||
<Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }} className="hidden lg:flex">
|
||||
<Stack direction="row" align="center" gap={1.5}>
|
||||
<Icon icon={Users} size={3.5} color="#9ca3af" />
|
||||
<Text size="sm" color="text-gray-400">{team.memberCount}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Rating */}
|
||||
<Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Text font="mono" weight="semibold" color={sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}>
|
||||
0
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Wins */}
|
||||
<Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
|
||||
{team.totalWins}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Card from '@/ui/Card';
|
||||
import { DriverIdentity } from '@/components/drivers/DriverIdentity';
|
||||
import { useTeamRoster } from "@/lib/hooks/team";
|
||||
import { useState } from 'react';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Search } from 'lucide-react';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Input from '@/ui/Input';
|
||||
|
||||
interface TeamSearchBarProps {
|
||||
searchQuery: string;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Card from '@/ui/Card';
|
||||
import { useTeamStandings } from "@/lib/hooks/team";
|
||||
|
||||
interface TeamStandingsProps {
|
||||
|
||||
Reference in New Issue
Block a user