45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface TeamIdentityProps {
|
|
name: string;
|
|
logoUrl: string;
|
|
performanceLevel?: string;
|
|
category?: string;
|
|
}
|
|
|
|
export function TeamIdentity({ name, logoUrl, performanceLevel, category }: TeamIdentityProps) {
|
|
return (
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Stack width="10" height="10" rounded="lg" overflow="hidden" border borderColor="border-charcoal-outline">
|
|
<Image
|
|
src={logoUrl}
|
|
alt={name}
|
|
width={40}
|
|
height={40}
|
|
fullWidth
|
|
fullHeight
|
|
objectFit="cover"
|
|
/>
|
|
</Stack>
|
|
<Stack flex={1}>
|
|
<Text weight="semibold" color="text-white" block truncate>{name}</Text>
|
|
{(performanceLevel || category) && (
|
|
<Stack direction="row" align="center" gap={2} mt={1} wrap>
|
|
{performanceLevel && (
|
|
<Text size="xs" color="text-gray-500">{performanceLevel}</Text>
|
|
)}
|
|
{category && (
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Stack width="1.5" height="1.5" rounded="full" bg="bg-primary-blue" opacity={0.5} />
|
|
<Text size="xs" color="text-primary-blue">{category}</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|