extract components from website
This commit is contained in:
@@ -1,185 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import { Race } from '@core/racing/domain/entities/Race';
|
||||
import { Clock, PlayCircle, CheckCircle2, XCircle, Zap, Car, Trophy } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { ChevronRight, Car, Zap, Trophy, ArrowRight } from 'lucide-react';
|
||||
import { formatTime, getRelativeTime } from '@/lib/utilities/time';
|
||||
import { raceStatusConfig } from '@/lib/utilities/raceStatus';
|
||||
|
||||
interface RaceCardProps {
|
||||
race: Race;
|
||||
leagueName?: string;
|
||||
race: {
|
||||
id: string;
|
||||
track: string;
|
||||
car: string;
|
||||
scheduledAt: string;
|
||||
status: string;
|
||||
leagueId?: string;
|
||||
leagueName: string;
|
||||
strengthOfField?: number | null;
|
||||
};
|
||||
onClick?: () => void;
|
||||
compact?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function RaceCard({ race, leagueName, onClick, compact = false }: RaceCardProps) {
|
||||
const statusConfig = {
|
||||
scheduled: {
|
||||
icon: Clock,
|
||||
color: 'text-primary-blue',
|
||||
bg: 'bg-primary-blue/10',
|
||||
border: 'border-primary-blue/30',
|
||||
label: 'Scheduled',
|
||||
},
|
||||
running: {
|
||||
icon: PlayCircle,
|
||||
color: 'text-performance-green',
|
||||
bg: 'bg-performance-green/10',
|
||||
border: 'border-performance-green/30',
|
||||
label: 'LIVE',
|
||||
},
|
||||
completed: {
|
||||
icon: CheckCircle2,
|
||||
color: 'text-gray-400',
|
||||
bg: 'bg-gray-500/10',
|
||||
border: 'border-gray-500/30',
|
||||
label: 'Completed',
|
||||
},
|
||||
cancelled: {
|
||||
icon: XCircle,
|
||||
color: 'text-warning-amber',
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/30',
|
||||
label: 'Cancelled',
|
||||
},
|
||||
};
|
||||
|
||||
const config = statusConfig[race.status];
|
||||
const StatusIcon = config.icon;
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
return new Date(date).toLocaleTimeString('en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
timeZoneName: 'short',
|
||||
});
|
||||
};
|
||||
|
||||
const getRelativeTime = (date: Date) => {
|
||||
const now = new Date();
|
||||
const targetDate = new Date(date);
|
||||
const diffMs = targetDate.getTime() - now.getTime();
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffMs < 0) return null;
|
||||
if (diffHours < 1) return 'Starting soon';
|
||||
if (diffHours < 24) return `In ${diffHours}h`;
|
||||
if (diffDays === 1) return 'Tomorrow';
|
||||
if (diffDays < 7) return `In ${diffDays} days`;
|
||||
return null;
|
||||
};
|
||||
|
||||
const relativeTime = race.status === 'scheduled' ? getRelativeTime(race.scheduledAt) : null;
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`
|
||||
relative overflow-hidden p-4 rounded-lg bg-iron-gray border ${config.border}
|
||||
transition-all duration-200
|
||||
${onClick ? 'cursor-pointer hover:scale-[1.02] hover:border-primary-blue' : ''}
|
||||
`}
|
||||
>
|
||||
{race.status === 'running' && (
|
||||
<div className="absolute top-0 left-0 right-0 h-0.5 bg-performance-green animate-pulse" />
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
<StatusIcon className={`w-5 h-5 ${config.color}`} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-medium text-white truncate">{race.track}</h3>
|
||||
<p className="text-xs text-gray-500">{formatTime(race.scheduledAt)}</p>
|
||||
</div>
|
||||
{relativeTime && (
|
||||
<span className={`text-xs ${config.color}`}>{relativeTime}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export function RaceCard({ race, onClick, className }: RaceCardProps) {
|
||||
const config = raceStatusConfig[race.status as keyof typeof raceStatusConfig];
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`
|
||||
relative overflow-hidden p-5 rounded-xl bg-iron-gray border ${config.border}
|
||||
transition-all duration-200
|
||||
${onClick ? 'cursor-pointer hover:scale-[1.02] hover:border-primary-blue' : ''}
|
||||
`}
|
||||
className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue ${className || ''}`}
|
||||
>
|
||||
{/* Live indicator bar */}
|
||||
{/* Live indicator */}
|
||||
{race.status === 'running' && (
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
|
||||
)}
|
||||
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
{/* Left side - Race info */}
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Time Column */}
|
||||
<div className="flex-shrink-0 text-center min-w-[60px]">
|
||||
<p className="text-lg font-bold text-white">
|
||||
{formatTime(race.scheduledAt)}
|
||||
</p>
|
||||
<p className={`text-xs ${config.color}`}>
|
||||
{race.status === 'running'
|
||||
? 'LIVE'
|
||||
: getRelativeTime(race.scheduledAt)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className={`w-px self-stretch ${config.bg}`} />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="text-lg font-semibold text-white truncate">{race.track}</h3>
|
||||
{/* Status badge */}
|
||||
<div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${config.bg} border ${config.border} flex-shrink-0`}>
|
||||
{race.status === 'running' && (
|
||||
<span className="w-1.5 h-1.5 bg-performance-green rounded-full animate-pulse" />
|
||||
)}
|
||||
<StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
|
||||
{race.track}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<span className="flex items-center gap-1 text-sm text-gray-400">
|
||||
<Car className="w-3.5 h-3.5" />
|
||||
{race.car}
|
||||
</span>
|
||||
{race.strengthOfField && (
|
||||
<span className="flex items-center gap-1 text-sm text-gray-400">
|
||||
<Zap className="w-3.5 h-3.5 text-warning-amber" />
|
||||
SOF {race.strengthOfField}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Badge */}
|
||||
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
|
||||
<config.icon className={`w-3.5 h-3.5 ${config.color}`} />
|
||||
<span className={`text-xs font-medium ${config.color}`}>
|
||||
{config.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta info */}
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Car className="w-3.5 h-3.5" />
|
||||
{race.car}
|
||||
</span>
|
||||
{race.strengthOfField && (
|
||||
<span className="flex items-center gap-1.5 text-warning-amber">
|
||||
<Zap className="w-3.5 h-3.5" />
|
||||
SOF {race.strengthOfField}
|
||||
</span>
|
||||
)}
|
||||
{leagueName && (
|
||||
<span className="flex items-center gap-1.5 text-primary-blue">
|
||||
<Trophy className="w-3.5 h-3.5" />
|
||||
{leagueName}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* League Link */}
|
||||
<div className="mt-3 pt-3 border-t border-charcoal-outline/50">
|
||||
<Link
|
||||
href={`/leagues/${race.leagueId ?? ''}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
|
||||
>
|
||||
<Trophy className="w-3.5 h-3.5" />
|
||||
{race.leagueName}
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side - Date/Time */}
|
||||
<div className="text-right flex-shrink-0">
|
||||
<p className="text-white font-medium">{formatDate(race.scheduledAt)}</p>
|
||||
<p className="text-gray-500 text-sm">{formatTime(race.scheduledAt)}</p>
|
||||
{relativeTime && (
|
||||
<p className={`text-sm mt-1 ${config.color}`}>{relativeTime}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom row */}
|
||||
<div className="flex items-center justify-between mt-3 pt-3 border-t border-charcoal-outline/50">
|
||||
<span className="text-xs text-gray-500 uppercase tracking-wide">
|
||||
{race.sessionType}
|
||||
</span>
|
||||
{race.registeredCount !== undefined && (
|
||||
<span className="text-xs text-gray-500">
|
||||
{race.registeredCount} registered
|
||||
{race.maxParticipants && ` / ${race.maxParticipants}`}
|
||||
</span>
|
||||
)}
|
||||
{/* Arrow */}
|
||||
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user