73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { DriverIdentity } from '@/ui/DriverIdentity';
|
|
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface TeamRosterItemProps {
|
|
driver: DriverViewModel;
|
|
href: string;
|
|
roleLabel: string;
|
|
joinedAtLabel: string;
|
|
ratingLabel: string | null;
|
|
overallRankLabel: string | null;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function TeamRosterItem({
|
|
driver,
|
|
href,
|
|
roleLabel,
|
|
joinedAtLabel,
|
|
ratingLabel,
|
|
overallRankLabel,
|
|
actions,
|
|
}: TeamRosterItemProps) {
|
|
return (
|
|
<Stack
|
|
bg="bg-iron-gray/50"
|
|
rounded="lg"
|
|
border={true}
|
|
borderColor="border-charcoal-outline"
|
|
p={4}
|
|
>
|
|
<Stack direction="row" align="center" justify="between" wrap gap={4}>
|
|
<DriverIdentity
|
|
driver={driver}
|
|
href={href}
|
|
contextLabel={roleLabel}
|
|
meta={
|
|
<Text size="xs" color="text-gray-400">
|
|
{driver.country} • Joined {joinedAtLabel}
|
|
</Text>
|
|
}
|
|
size="md"
|
|
/>
|
|
|
|
{ratingLabel !== null && (
|
|
<Stack direction="row" align="center" gap={6}>
|
|
<Stack display="flex" flexDirection="col" alignItems="center">
|
|
<Text size="lg" weight="bold" color="text-primary-blue" block>
|
|
{ratingLabel}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-400">Rating</Text>
|
|
</Stack>
|
|
{overallRankLabel !== null && (
|
|
<Stack display="flex" flexDirection="col" alignItems="center">
|
|
<Text size="sm" color="text-gray-300" block>{overallRankLabel}</Text>
|
|
<Text size="xs" color="text-gray-500">Rank</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
)}
|
|
|
|
{actions && (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
{actions}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|