45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Flag } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
interface RaceDetailCardProps {
|
|
track: string;
|
|
car: string;
|
|
sessionType: string;
|
|
statusLabel: string;
|
|
statusColor: string;
|
|
}
|
|
|
|
export function RaceDetailCard({ track, car, sessionType, statusLabel, statusColor }: RaceDetailCardProps) {
|
|
return (
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Heading level={2} icon={<Icon icon={Flag} size={5} color="#3b82f6" />}>Race Details</Heading>
|
|
<Grid cols={2} gap={4}>
|
|
<DetailItem label="Track" value={track} />
|
|
<DetailItem label="Car" value={car} />
|
|
<DetailItem label="Session Type" value={sessionType} capitalize />
|
|
<DetailItem label="Status" value={statusLabel} color={statusColor} />
|
|
</Grid>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function DetailItem({ label, value, capitalize, color }: { label: string, value: string | number, capitalize?: boolean, color?: string }) {
|
|
return (
|
|
<Box p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
|
|
<Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block mb={1}>{label}</Text>
|
|
<Text weight="medium" color="text-white" style={{ textTransform: capitalize ? 'capitalize' : 'none', color: color || 'white' }}>{value}</Text>
|
|
</Box>
|
|
);
|
|
}
|