68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { StatusDot } from '@/ui/StatusDot';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface SessionSummaryPanelProps {
|
|
title: string;
|
|
status: 'live' | 'upcoming' | 'completed';
|
|
startTime?: string;
|
|
trackName?: string;
|
|
carName?: string;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* SessionSummaryPanel
|
|
*
|
|
* Displays a dense summary of a racing session.
|
|
* Part of the "Telemetry Workspace" layout.
|
|
*/
|
|
export function SessionSummaryPanel({
|
|
title,
|
|
status,
|
|
startTime,
|
|
trackName,
|
|
carName,
|
|
className = '',
|
|
}: SessionSummaryPanelProps) {
|
|
const statusColor = status === 'live' ? '#4ED4E0' : status === 'upcoming' ? '#FFBE4D' : '#94a3b8';
|
|
|
|
return (
|
|
<Panel title="Session Summary" className={className}>
|
|
<Box display="flex" flexDirection="col" gap={3}>
|
|
<Box display="flex" align="center" justify="between">
|
|
<Text weight="bold" size="lg">{title}</Text>
|
|
<Box display="flex" align="center" gap={2}>
|
|
<StatusDot color={statusColor} pulse={status === 'live'} size={2} />
|
|
<Text size="xs" uppercase weight="bold" style={{ color: statusColor }}>
|
|
{status}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box display="grid" gridCols={2} gap={4} borderTop borderStyle="solid" borderColor="border-gray/10" pt={3}>
|
|
{startTime && (
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" uppercase block mb={1}>Start Time</Text>
|
|
<Text size="sm">{startTime}</Text>
|
|
</Box>
|
|
)}
|
|
{trackName && (
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" uppercase block mb={1}>Track</Text>
|
|
<Text size="sm">{trackName}</Text>
|
|
</Box>
|
|
)}
|
|
{carName && (
|
|
<Box colSpan={2}>
|
|
<Text size="xs" color="text-gray-500" uppercase block mb={1}>Vehicle</Text>
|
|
<Text size="sm">{carName}</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Panel>
|
|
);
|
|
}
|