75 lines
3.1 KiB
TypeScript
75 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Car, Clock, MailCheck, MapPin, Users2 } from 'lucide-react';
|
|
|
|
interface DriverRacingProfileProps {
|
|
racingStyle?: string | null;
|
|
favoriteTrack?: string | null;
|
|
favoriteCar?: string | null;
|
|
availableHours?: string | null;
|
|
lookingForTeam?: boolean;
|
|
openToRequests?: boolean;
|
|
}
|
|
|
|
export function DriverRacingProfile({
|
|
racingStyle,
|
|
favoriteTrack,
|
|
favoriteCar,
|
|
availableHours,
|
|
lookingForTeam,
|
|
openToRequests,
|
|
}: DriverRacingProfileProps) {
|
|
const details = [
|
|
{ label: 'Racing Style', value: racingStyle || 'Not specified', icon: Users2 },
|
|
{ label: 'Favorite Track', value: favoriteTrack || 'Not specified', icon: MapPin },
|
|
{ label: 'Favorite Car', value: favoriteCar || 'Not specified', icon: Car },
|
|
{ label: 'Availability', value: availableHours || 'Not specified', icon: Clock },
|
|
];
|
|
|
|
return (
|
|
<Stack display="flex" flexDirection="col" gap={6} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50" p={6}>
|
|
<Stack display="flex" alignItems="center" justifyContent="between">
|
|
<Heading level={3}>Racing Profile</Heading>
|
|
<Stack direction="row" gap={2}>
|
|
{lookingForTeam && (
|
|
<Stack display="flex" alignItems="center" gap={1.5} rounded="full" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" px={3} py={1}>
|
|
<Users2 size={12} color="#198CFF" />
|
|
<Text size="xs" weight="bold" color="text-primary-blue" uppercase letterSpacing="tight">Looking for Team</Text>
|
|
</Stack>
|
|
)}
|
|
{openToRequests && (
|
|
<Stack display="flex" alignItems="center" gap={1.5} rounded="full" bg="bg-performance-green/10" border borderColor="border-performance-green/20" px={3} py={1}>
|
|
<MailCheck size={12} color="#22C55E" />
|
|
<Text size="xs" weight="bold" color="text-performance-green" uppercase letterSpacing="tight">Open to Requests</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
|
|
{details.map((detail, index) => {
|
|
const Icon = detail.icon;
|
|
return (
|
|
<Stack key={index} display="flex" alignItems="center" gap={4} rounded="xl" border borderColor="border-charcoal-outline/50" bg="bg-deep-graphite/50" p={4}>
|
|
<Stack display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline/50" color="text-gray-400">
|
|
<Icon size={20} />
|
|
</Stack>
|
|
<Stack display="flex" flexDirection="col">
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
|
|
{detail.label}
|
|
</Text>
|
|
<Text size="sm" weight="semibold" color="text-white">
|
|
{detail.value}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|