104 lines
3.1 KiB
TypeScript
104 lines
3.1 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 { ProfileHero, ProfileAvatar, ProfileStatsGroup, ProfileStat } from '@/ui/ProfileHero';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Group } from '@/ui/Group';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';
|
|
import React from '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 (
|
|
<ProfileHero variant="muted">
|
|
<Box display="flex" alignItems="center" gap={8} flexWrap="wrap">
|
|
<ProfileAvatar>
|
|
<Image
|
|
src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
|
|
alt={driver.name}
|
|
width={96}
|
|
height={96}
|
|
objectFit="cover"
|
|
/>
|
|
</ProfileAvatar>
|
|
|
|
<Stack flex={1} minWidth="200px" gap={1}>
|
|
<Box marginBottom={1}>
|
|
<Group gap={3}>
|
|
<Heading level={1}>{driver.name}</Heading>
|
|
<Text size="2xl" aria-label={`Country: ${driver.country}`}>
|
|
{CountryFlagDisplay.fromCountryCode(driver.country).toString()}
|
|
</Text>
|
|
</Group>
|
|
</Box>
|
|
|
|
<Group gap={4}>
|
|
<Group gap={1.5}>
|
|
<Globe size={14} color="var(--ui-color-text-low)" />
|
|
<Text size="xs" font="mono" variant="low">ID: {driver.iracingId}</Text>
|
|
</Group>
|
|
<Group gap={1.5}>
|
|
<Calendar size={14} color="var(--ui-color-text-low)" />
|
|
<Text size="xs" variant="low">
|
|
Joined {new Date(driver.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
|
</Text>
|
|
</Group>
|
|
</Group>
|
|
</Stack>
|
|
|
|
<ProfileStatsGroup>
|
|
{stats && (
|
|
<React.Fragment>
|
|
<ProfileStat label="RATING" value={stats.rating} intent="primary" />
|
|
<ProfileStat label="GLOBAL RANK" value={`#${globalRank}`} intent="warning" />
|
|
</React.Fragment>
|
|
)}
|
|
</ProfileStatsGroup>
|
|
|
|
{!isOwnProfile && onAddFriend && (
|
|
<Box marginLeft="auto">
|
|
<Button
|
|
variant={friendRequestSent ? 'secondary' : 'primary'}
|
|
onClick={onAddFriend}
|
|
disabled={friendRequestSent}
|
|
size="sm"
|
|
icon={<UserPlus size={16} />}
|
|
>
|
|
{friendRequestSent ? 'Request Sent' : 'Add Friend'}
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</ProfileHero>
|
|
);
|
|
}
|