79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { Flag, UserPlus, Users } from 'lucide-react';
|
|
|
|
interface RacingProfileProps {
|
|
racingStyle: string;
|
|
favoriteTrack: string;
|
|
favoriteCar: string;
|
|
availableHours: string;
|
|
lookingForTeam: boolean;
|
|
openToRequests: boolean;
|
|
}
|
|
|
|
export function RacingProfile({
|
|
racingStyle,
|
|
favoriteTrack,
|
|
favoriteCar,
|
|
availableHours,
|
|
lookingForTeam,
|
|
openToRequests,
|
|
}: RacingProfileProps) {
|
|
return (
|
|
<Card>
|
|
<Box mb={4}>
|
|
<Heading level={2} icon={<Icon icon={Flag} size={5} color="#00f2ff" />}>
|
|
Racing Profile
|
|
</Heading>
|
|
</Box>
|
|
<Stack gap={4}>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Racing Style</Text>
|
|
<Text color="text-white" weight="medium">{racingStyle}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Favorite Track</Text>
|
|
<Text color="text-white" weight="medium">{favoriteTrack}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Favorite Car</Text>
|
|
<Text color="text-white" weight="medium">{favoriteCar}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Available</Text>
|
|
<Text color="text-white" weight="medium">{availableHours}</Text>
|
|
</Box>
|
|
|
|
{/* Status badges */}
|
|
<Box mt={4} pt={4} style={{ borderTop: '1px solid rgba(38, 38, 38, 0.5)' }}>
|
|
<Stack gap={2}>
|
|
{lookingForTeam && (
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', border: '1px solid rgba(16, 185, 129, 0.3)' }}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Users} size={4} color="#10b981" />
|
|
<Text size="sm" color="text-performance-green" weight="medium">Looking for Team</Text>
|
|
</Stack>
|
|
</Surface>
|
|
)}
|
|
{openToRequests && (
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)' }}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={UserPlus} size={4} color="#3b82f6" />
|
|
<Text size="sm" color="text-primary-blue" weight="medium">Open to Friend Requests</Text>
|
|
</Stack>
|
|
</Surface>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|