64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Image } from '@/ui/Image';
|
|
import { Text } from '@/ui/Text';
|
|
import { Card } from '@/ui/Card';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface ActiveDriverCardProps {
|
|
name: string;
|
|
avatarUrl?: string;
|
|
categoryLabel?: string;
|
|
categoryColor?: string;
|
|
skillLevelLabel?: string;
|
|
skillLevelColor?: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function ActiveDriverCard({
|
|
name,
|
|
avatarUrl,
|
|
categoryLabel,
|
|
categoryColor,
|
|
skillLevelLabel,
|
|
skillLevelColor,
|
|
onClick,
|
|
}: ActiveDriverCardProps) {
|
|
return (
|
|
<Stack
|
|
as="button"
|
|
{...({ type: 'button' } as any)}
|
|
onClick={onClick}
|
|
p={3}
|
|
rounded="xl"
|
|
bg="bg-iron-gray/40"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
className="transition-all hover:border-performance-green/40 group text-center"
|
|
>
|
|
<Stack position="relative" w="12" h="12" mx="auto" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" mb={2}>
|
|
<Image src={avatarUrl || '/default-avatar.png'} alt={name} objectFit="cover" fill />
|
|
<Stack position="absolute" bottom="0" right="0" w="3" h="3" rounded="full" bg="bg-performance-green" border borderColor="border-iron-gray" style={{ borderWidth: '2px' }}>{null}</Stack>
|
|
</Stack>
|
|
<Text
|
|
size="sm"
|
|
weight="medium"
|
|
color="text-white"
|
|
truncate
|
|
block
|
|
groupHoverTextColor="performance-green"
|
|
transition
|
|
>
|
|
{name}
|
|
</Text>
|
|
<Stack direction="row" align="center" justify="center" gap={1}>
|
|
{categoryLabel && (
|
|
<Text size="xs" color={categoryColor}>{categoryLabel}</Text>
|
|
)}
|
|
{skillLevelLabel && (
|
|
<Text size="xs" color={skillLevelColor}>{skillLevelLabel}</Text>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|