65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Image } from '@/ui/Image';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
export interface ActiveDriverCardProps {
|
|
name: string;
|
|
avatarUrl: string;
|
|
categoryLabel?: string;
|
|
skillLevelLabel?: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function ActiveDriverCard({
|
|
name,
|
|
avatarUrl,
|
|
categoryLabel,
|
|
skillLevelLabel,
|
|
onClick,
|
|
}: ActiveDriverCardProps) {
|
|
return (
|
|
<Surface
|
|
as="button"
|
|
onClick={onClick}
|
|
variant="muted"
|
|
rounded="xl"
|
|
padding={3}
|
|
style={{ border: '1px solid var(--ui-color-border-default)', textAlign: 'center', cursor: 'pointer' }}
|
|
>
|
|
<Box position="relative" width={12} height={12} marginX="auto" marginBottom={2}>
|
|
<Box fullWidth fullHeight rounded="full" style={{ overflow: 'hidden', border: '1px solid var(--ui-color-border-default)' }}>
|
|
<Image src={avatarUrl} alt={name} objectFit="cover" />
|
|
</Box>
|
|
<Box
|
|
position="absolute"
|
|
bottom={0}
|
|
right={0}
|
|
width={3}
|
|
height={3}
|
|
rounded="full"
|
|
bg="var(--ui-color-intent-success)"
|
|
style={{ border: '2px solid var(--ui-color-bg-surface)' }}
|
|
/>
|
|
</Box>
|
|
<Text
|
|
size="sm"
|
|
weight="medium"
|
|
variant="high"
|
|
truncate
|
|
block
|
|
>
|
|
{name}
|
|
</Text>
|
|
<Box display="flex" alignItems="center" justifyContent="center" gap={1}>
|
|
{categoryLabel && (
|
|
<Text size="xs" variant="primary">{categoryLabel}</Text>
|
|
)}
|
|
{skillLevelLabel && (
|
|
<Text size="xs" variant="telemetry">{skillLevelLabel}</Text>
|
|
)}
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
}
|