138 lines
2.7 KiB
TypeScript
138 lines
2.7 KiB
TypeScript
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Image } from '@/ui/Image';
|
|
import { Link } from '@/ui/Link';
|
|
import { PlaceholderImage } from '@/ui/PlaceholderImage';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface DriverSummaryPillProps {
|
|
name: string;
|
|
avatarSrc?: string | null;
|
|
rating?: number | null;
|
|
rank?: number | null;
|
|
onClick?: () => void;
|
|
href?: string;
|
|
ratingComponent?: React.ReactNode;
|
|
}
|
|
|
|
export function DriverSummaryPill({
|
|
name,
|
|
avatarSrc,
|
|
onClick,
|
|
href,
|
|
ratingComponent,
|
|
}: DriverSummaryPillProps) {
|
|
const content = (
|
|
<>
|
|
<Box
|
|
w="8"
|
|
h="8"
|
|
rounded="full"
|
|
overflow="hidden"
|
|
bg="bg-charcoal-outline"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
border
|
|
borderColor="border-charcoal-outline/80"
|
|
>
|
|
{avatarSrc ? (
|
|
<Image
|
|
src={avatarSrc}
|
|
alt={name}
|
|
width={32}
|
|
height={32}
|
|
objectFit="cover"
|
|
fill
|
|
/>
|
|
) : (
|
|
<PlaceholderImage size={32} />
|
|
)}
|
|
</Box>
|
|
|
|
<Stack direction="col" align="start" justify="center">
|
|
<Text
|
|
size="xs"
|
|
weight="semibold"
|
|
color="text-white"
|
|
truncate
|
|
block
|
|
style={{ maxWidth: '140px' }}
|
|
>
|
|
{name}
|
|
</Text>
|
|
{ratingComponent}
|
|
</Stack>
|
|
</>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
block
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
rounded="full"
|
|
bg="bg-iron-gray/70"
|
|
px={3}
|
|
py={1.5}
|
|
border
|
|
borderColor="border-charcoal-outline/80"
|
|
shadow="0 0 18px rgba(0,0,0,0.45)"
|
|
transition
|
|
hoverBorderColor="primary-blue/60"
|
|
className="hover:bg-iron-gray"
|
|
>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
if (onClick) {
|
|
return (
|
|
<Box
|
|
as="button"
|
|
type="button"
|
|
onClick={onClick}
|
|
cursor="pointer"
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
rounded="full"
|
|
bg="bg-iron-gray/70"
|
|
px={3}
|
|
py={1.5}
|
|
border
|
|
borderColor="border-charcoal-outline/80"
|
|
shadow="0 0 18px rgba(0,0,0,0.45)"
|
|
transition
|
|
hoverBorderColor="primary-blue/60"
|
|
className="hover:bg-iron-gray"
|
|
>
|
|
{content}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
rounded="full"
|
|
bg="bg-iron-gray/70"
|
|
px={3}
|
|
py={1.5}
|
|
border
|
|
borderColor="border-charcoal-outline/80"
|
|
>
|
|
{content}
|
|
</Box>
|
|
);
|
|
}
|