111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
import { RatingBadge } from '@/components/drivers/RatingBadge';
|
|
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import React from 'react';
|
|
|
|
interface DriverHeaderPanelProps {
|
|
name: string;
|
|
avatarUrl?: string;
|
|
nationality: string;
|
|
rating: number;
|
|
ratingLabel: string;
|
|
globalRankLabel?: string | null;
|
|
bio?: string | null;
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
export function DriverHeaderPanel({
|
|
name,
|
|
avatarUrl,
|
|
nationality,
|
|
rating,
|
|
ratingLabel,
|
|
globalRankLabel,
|
|
bio,
|
|
actions
|
|
}: DriverHeaderPanelProps) {
|
|
const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
|
|
|
|
return (
|
|
<Stack
|
|
bg="var(--ui-color-bg-surface)"
|
|
rounded="xl"
|
|
border
|
|
borderColor="var(--ui-color-border-low)"
|
|
overflow="hidden"
|
|
position="relative"
|
|
>
|
|
{/* Background Accent */}
|
|
<Stack
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
height="24"
|
|
bg="linear-gradient(to right, rgba(25, 140, 255, 0.2), transparent)"
|
|
opacity={0.5}
|
|
/>
|
|
|
|
<Stack p={6} position="relative">
|
|
<Stack direction={{ base: 'col', md: 'row' }} gap={6} align={{ base: 'start', md: 'center' }}>
|
|
{/* Avatar */}
|
|
<Stack
|
|
width="32"
|
|
height="32"
|
|
rounded="2xl"
|
|
overflow="hidden"
|
|
border
|
|
borderColor="var(--ui-color-border-low)"
|
|
bg="var(--ui-color-bg-base)"
|
|
flexShrink={0}
|
|
>
|
|
<Image
|
|
src={avatarUrl || defaultAvatar}
|
|
alt={name}
|
|
fill
|
|
objectFit="cover"
|
|
/>
|
|
</Stack>
|
|
|
|
{/* Info */}
|
|
<Stack flexGrow={1}>
|
|
<Stack gap={2}>
|
|
<Stack direction="row" align="center" gap={3} wrap>
|
|
<Text as="h1" size="3xl" weight="bold" variant="high">
|
|
{name}
|
|
</Text>
|
|
<RatingBadge rating={rating} ratingLabel={ratingLabel} size="lg" />
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="center" gap={4} wrap>
|
|
<Text size="sm" variant="low">
|
|
{nationality}
|
|
</Text>
|
|
{globalRankLabel && (
|
|
<Text size="sm" variant="low">
|
|
Global Rank: <Text variant="warning" weight="semibold">{globalRankLabel}</Text>
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
|
|
{bio && (
|
|
<Text size="sm" variant="low" maxWidth="2xl" mt={2} lineClamp={2}>
|
|
{bio}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Actions */}
|
|
{actions && (
|
|
<Stack flexShrink={0}>
|
|
{actions}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|