98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
|
|
|
|
import { DriverRatingPill } from '@/components/drivers/DriverRatingPill';
|
|
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Button } from '@/ui/Button';
|
|
import { CountryFlag } from '@/ui/CountryFlag';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Image } from '@/ui/Image';
|
|
import { PlaceholderImage } from '@/ui/PlaceholderImage';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface ProfileHeaderProps {
|
|
driver: DriverViewModel;
|
|
rating?: number | null;
|
|
rank?: number | null;
|
|
isOwnProfile?: boolean;
|
|
onEditClick?: () => void;
|
|
teamName?: string | null;
|
|
teamTag?: string | null;
|
|
}
|
|
|
|
export function ProfileHeader({
|
|
driver,
|
|
rating,
|
|
rank,
|
|
isOwnProfile = false,
|
|
onEditClick,
|
|
teamName,
|
|
teamTag,
|
|
}: ProfileHeaderProps) {
|
|
return (
|
|
<Stack display="flex" alignItems="start" justifyContent="between">
|
|
<Stack display="flex" alignItems="start" gap={4}>
|
|
<Stack
|
|
w="20"
|
|
h="20"
|
|
rounded="full"
|
|
bg="bg-gradient-to-br from-primary-blue to-purple-600"
|
|
overflow="hidden"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
{driver.avatarUrl ? (
|
|
<Image
|
|
src={driver.avatarUrl}
|
|
alt={driver.name}
|
|
width={80}
|
|
height={80}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<PlaceholderImage size={80} />
|
|
)}
|
|
</Stack>
|
|
|
|
<Stack>
|
|
<Stack display="flex" alignItems="center" gap={3} mb={2}>
|
|
<Heading level={1}>{driver.name}</Heading>
|
|
{driver.country && <CountryFlag countryCode={driver.country} size="lg" />}
|
|
{teamTag && (
|
|
<Badge variant="primary">
|
|
{teamTag}
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
|
|
<Stack display="flex" alignItems="center" gap={4}>
|
|
<Text size="sm" color="text-gray-400">iRacing ID: {driver.iracingId}</Text>
|
|
{teamName && (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Text size="sm" color="text-gray-400">•</Text>
|
|
<Text size="sm" color="text-primary-blue">
|
|
{teamTag ? `[${teamTag}] ${teamName}` : teamName}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
|
|
{(typeof rating === 'number' || typeof rank === 'number') && (
|
|
<Stack mt={2}>
|
|
<DriverRatingPill rating={rating ?? null} rank={rank ?? null} />
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{isOwnProfile && (
|
|
<Button variant="secondary" onClick={onEditClick}>
|
|
Edit Profile
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|