34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { ChevronRight } from 'lucide-react';
|
|
import { formatTime, formatDate } from '@/lib/utilities/time';
|
|
|
|
interface SidebarRaceItemProps {
|
|
race: {
|
|
id: string;
|
|
track: string;
|
|
scheduledAt: string;
|
|
};
|
|
onClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function SidebarRaceItem({ race, onClick, className }: SidebarRaceItemProps) {
|
|
const scheduledAtDate = new Date(race.scheduledAt);
|
|
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={`flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors ${className || ''}`}
|
|
>
|
|
<div className="flex-shrink-0 w-10 h-10 bg-primary-blue/10 rounded-lg flex items-center justify-center">
|
|
<span className="text-sm font-bold text-primary-blue">
|
|
{scheduledAtDate.getDate()}
|
|
</span>
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium text-white truncate">{race.track}</p>
|
|
<p className="text-xs text-gray-500">{formatTime(scheduledAtDate)}</p>
|
|
</div>
|
|
<ChevronRight className="w-4 h-4 text-gray-500" />
|
|
</div>
|
|
);
|
|
} |