84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users, ChevronRight } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Image } from '@/ui/Image';
|
|
|
|
interface TeamCardProps {
|
|
id: string;
|
|
name: string;
|
|
logoUrl?: string;
|
|
memberCount: number;
|
|
isRecruiting?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function TeamCard({ name, logoUrl, memberCount, isRecruiting, onClick }: TeamCardProps) {
|
|
return (
|
|
<Box
|
|
as="article"
|
|
bg="surface-charcoal"
|
|
border
|
|
borderColor="outline-steel"
|
|
p={5}
|
|
cursor="pointer"
|
|
hover={{ borderColor: 'primary-accent', bg: 'surface-charcoal/80' }}
|
|
transition="smooth"
|
|
onClick={onClick}
|
|
position="relative"
|
|
overflow="hidden"
|
|
>
|
|
{/* Accent line */}
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
left="0"
|
|
w="1"
|
|
h="full"
|
|
bg={isRecruiting ? 'telemetry-aqua' : 'outline-steel'}
|
|
/>
|
|
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Box
|
|
w="12"
|
|
h="12"
|
|
bg="base-black"
|
|
border
|
|
borderColor="outline-steel"
|
|
display="flex"
|
|
center
|
|
overflow="hidden"
|
|
>
|
|
{logoUrl ? (
|
|
<Image src={logoUrl} alt={name} width={48} height={48} />
|
|
) : (
|
|
<Text size="xs" weight="bold" color="text-gray-600">{name.substring(0, 2).toUpperCase()}</Text>
|
|
)}
|
|
</Box>
|
|
|
|
<Box flex="1">
|
|
<Heading level={4} weight="bold">{name}</Heading>
|
|
<Stack direction="row" align="center" gap={3} mt={1}>
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Icon icon={Users} size={3} color="text-gray-500" />
|
|
<Text size="xs" color="text-gray-500" font="mono">{memberCount}</Text>
|
|
</Stack>
|
|
{isRecruiting && (
|
|
<Box px={1.5} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
|
|
<Text size="xs" color="telemetry-aqua" weight="bold" uppercase letterSpacing="tighter">Recruiting</Text>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Icon icon={ChevronRight} size={4} color="text-gray-700" />
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|