74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { ChevronLeft, Calendar, MapPin } from 'lucide-react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Box } from '@/ui/Box';
|
|
import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
|
|
|
|
interface RaceDetailsHeaderProps {
|
|
title: string;
|
|
leagueName: string;
|
|
trackName: string;
|
|
scheduledAt: string;
|
|
status: SessionStatus;
|
|
onBack: () => void;
|
|
}
|
|
|
|
export function RaceDetailsHeader({
|
|
title,
|
|
leagueName,
|
|
trackName,
|
|
scheduledAt,
|
|
status,
|
|
onBack,
|
|
}: RaceDetailsHeaderProps) {
|
|
return (
|
|
<Box as="header" bg="bg-surface-charcoal" borderBottom borderColor="border-outline-steel" p={6}>
|
|
<Stack gap={6}>
|
|
<Box
|
|
as="button"
|
|
onClick={onBack}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={2}
|
|
color="text-gray-500"
|
|
hoverTextColor="text-primary-accent"
|
|
transition
|
|
group
|
|
>
|
|
<Icon icon={ChevronLeft} size={4} groupHoverScale />
|
|
<Text size="xs" weight="bold" uppercase>Back to Schedule</Text>
|
|
</Box>
|
|
|
|
<Stack direction="row" justifyContent="between" alignItems="end">
|
|
<Stack gap={2}>
|
|
<Text size="xs" color="text-primary-accent" weight="bold" uppercase>
|
|
{leagueName}
|
|
</Text>
|
|
<Heading level={1}>{title}</Heading>
|
|
|
|
<Box display="flex" flexWrap="wrap" gap={6} mt={2}>
|
|
<Stack direction="row" alignItems="center" gap={2}>
|
|
<Icon icon={MapPin} size={4} color="#6b7280" />
|
|
<Text size="sm" color="text-gray-300">{trackName}</Text>
|
|
</Stack>
|
|
<Stack direction="row" alignItems="center" gap={2}>
|
|
<Icon icon={Calendar} size={4} color="#6b7280" />
|
|
<Text size="sm" color="text-gray-300">{scheduledAt}</Text>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Box pb={2}>
|
|
<SessionStatusBadge status={status} />
|
|
</Box>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|