106 lines
3.9 KiB
TypeScript
106 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Globe, Trophy, UserPlus, Check } from 'lucide-react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Button } from '@/ui/Button';
|
|
import { RatingBadge } from '@/components/drivers/RatingBadge';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Image } from '@/ui/Image';
|
|
import { SafetyRatingBadge } from './SafetyRatingBadge';
|
|
|
|
interface DriverProfileHeaderProps {
|
|
name: string;
|
|
avatarUrl?: string | null;
|
|
nationality: string;
|
|
rating: number;
|
|
safetyRating?: number;
|
|
globalRank?: number;
|
|
bio?: string | null;
|
|
friendRequestSent: boolean;
|
|
onAddFriend: () => void;
|
|
}
|
|
|
|
export function DriverProfileHeader({
|
|
name,
|
|
avatarUrl,
|
|
nationality,
|
|
rating,
|
|
safetyRating = 92,
|
|
globalRank,
|
|
bio,
|
|
friendRequestSent,
|
|
onAddFriend,
|
|
}: DriverProfileHeaderProps) {
|
|
const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
|
|
|
|
return (
|
|
<Stack position="relative" overflow="hidden" rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal" p={{ base: 6, lg: 8 }}>
|
|
{/* Background Accents */}
|
|
<Stack position="absolute" right="-24" top="-24" w="96" h="96" rounded="full" bg="bg-primary-blue/5" blur="3xl" />
|
|
|
|
<Stack position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={8}>
|
|
{/* Avatar */}
|
|
<Stack position="relative" h={{ base: '32', lg: '40' }} w={{ base: '32', lg: '40' }} flexShrink={0} overflow="hidden" rounded="2xl" border={true} borderWidth="2px" borderColor="border-charcoal-outline" bg="bg-deep-graphite" shadow="2xl">
|
|
<Image
|
|
src={avatarUrl || defaultAvatar}
|
|
alt={name}
|
|
fill
|
|
objectFit="cover"
|
|
/>
|
|
</Stack>
|
|
|
|
{/* Info */}
|
|
<Stack display="flex" flexGrow={1} flexDirection="col" gap={4}>
|
|
<Stack display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={2}>
|
|
<Stack>
|
|
<Stack direction="row" align="center" gap={3} mb={1}>
|
|
<Heading level={1}>{name}</Heading>
|
|
{globalRank && (
|
|
<Stack display="flex" alignItems="center" gap={1} rounded="md" bg="bg-warning-amber/10" px={2} py={0.5} border borderColor="border-warning-amber/20">
|
|
<Trophy size={12} color="#FFBE4D" />
|
|
<Text size="xs" weight="bold" font="mono" color="text-warning-amber">
|
|
#{globalRank}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Globe size={14} color="#6B7280" />
|
|
<Text size="sm" color="text-gray-400">{nationality}</Text>
|
|
</Stack>
|
|
<Stack w="1" h="1" rounded="full" bg="bg-gray-700" />
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<RatingBadge rating={rating} size="sm" />
|
|
<SafetyRatingBadge rating={safetyRating} size="sm" />
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack mt={{ base: 4, lg: 0 }}>
|
|
<Button
|
|
variant={friendRequestSent ? 'secondary' : 'primary'}
|
|
onClick={onAddFriend}
|
|
disabled={friendRequestSent}
|
|
icon={friendRequestSent ? <Check size={18} /> : <UserPlus size={18} />}
|
|
>
|
|
{friendRequestSent ? 'Request Sent' : 'Add Friend'}
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{bio && (
|
|
<Stack maxWidth="3xl">
|
|
<Text size="sm" color="text-gray-400" leading="relaxed">
|
|
{bio}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|