139 lines
4.7 KiB
TypeScript
139 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import { mediaConfig } from '@/lib/config/mediaConfig';
|
|
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Surface } from '@/ui/primitives/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';
|
|
|
|
interface ProfileHeaderProps {
|
|
driver: {
|
|
name: string;
|
|
avatarUrl?: string;
|
|
country: string;
|
|
iracingId: number;
|
|
joinedAt: string | Date;
|
|
};
|
|
stats: {
|
|
rating: number;
|
|
} | null;
|
|
globalRank: number;
|
|
onAddFriend?: () => void;
|
|
friendRequestSent?: boolean;
|
|
isOwnProfile?: boolean;
|
|
}
|
|
|
|
export function ProfileHeader({
|
|
driver,
|
|
stats,
|
|
globalRank,
|
|
onAddFriend,
|
|
friendRequestSent,
|
|
isOwnProfile,
|
|
}: ProfileHeaderProps) {
|
|
return (
|
|
<header>
|
|
<Surface variant="muted" rounded="xl" border padding={6} backgroundColor="#141619" borderColor="#23272B">
|
|
<Stack direction="row" align="center" gap={8} wrap>
|
|
{/* Avatar with telemetry-style border */}
|
|
<Stack position="relative">
|
|
<Stack
|
|
width="6rem"
|
|
height="6rem"
|
|
rounded="md"
|
|
border
|
|
borderColor="#23272B"
|
|
p={0.5}
|
|
backgroundColor="#0C0D0F"
|
|
>
|
|
<Stack width="100%" height="100%" rounded="sm" overflow="hidden">
|
|
<Image
|
|
src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
|
|
alt={driver.name}
|
|
width={96}
|
|
height={96}
|
|
objectFit="cover"
|
|
fullWidth
|
|
fullHeight
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Driver Info */}
|
|
<Stack flexGrow={1} minWidth="0">
|
|
<Stack direction="row" align="center" gap={3} mb={1}>
|
|
<Heading level={1} fontSize="1.5rem">
|
|
{driver.name}
|
|
</Heading>
|
|
<Text size="2xl" aria-label={`Country: ${driver.country}`}>
|
|
{CountryFlagDisplay.fromCountryCode(driver.country).toString()}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="center" gap={4} color="#9ca3af">
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Globe size={14} />
|
|
<Text size="xs" font="mono">ID: {driver.iracingId}</Text>
|
|
</Stack>
|
|
<Stack width="1px" height="12px" backgroundColor="#23272B" />
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Calendar size={14} />
|
|
<Text size="xs">
|
|
Joined {new Date(driver.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Stats Grid */}
|
|
<Stack direction="row" align="center" gap={6}>
|
|
{stats && (
|
|
<>
|
|
<Stack>
|
|
<Stack gap={0.5}>
|
|
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">RATING</Text>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Star size={14} color="#198CFF" />
|
|
<Text font="mono" size="lg" weight="bold" color="#198CFF">{stats.rating}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
<Stack width="1px" height="32px" backgroundColor="#23272B" />
|
|
<Stack>
|
|
<Stack gap={0.5}>
|
|
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">GLOBAL RANK</Text>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Trophy size={14} color="#FFBE4D" />
|
|
<Text font="mono" size="lg" weight="bold" color="#FFBE4D">#{globalRank}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
|
|
{/* Actions */}
|
|
{!isOwnProfile && onAddFriend && (
|
|
<Stack ml="auto">
|
|
<Button
|
|
variant={friendRequestSent ? 'secondary' : 'primary'}
|
|
onClick={onAddFriend}
|
|
disabled={friendRequestSent}
|
|
size="sm"
|
|
icon={<UserPlus size={16} />}
|
|
>
|
|
{friendRequestSent ? 'Request Sent' : 'Add Friend'}
|
|
</Button>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Surface>
|
|
</header>
|
|
);
|
|
}
|