81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { Users, Trophy } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { Stack } from './Stack';
|
|
import { Image } from './Image';
|
|
import { Icon } from './Icon';
|
|
import { Badge } from './Badge';
|
|
|
|
interface RecruitingTeamCardProps {
|
|
name: string;
|
|
description?: string;
|
|
logoUrl: string;
|
|
category?: string;
|
|
memberCount: number;
|
|
totalWins: number;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function RecruitingTeamCard({
|
|
name,
|
|
description,
|
|
logoUrl,
|
|
category,
|
|
memberCount,
|
|
totalWins,
|
|
onClick,
|
|
}: RecruitingTeamCardProps) {
|
|
return (
|
|
<Box
|
|
as="button"
|
|
type="button"
|
|
onClick={onClick}
|
|
p={4}
|
|
rounded="xl"
|
|
bg="bg-iron-gray/60"
|
|
border={true}
|
|
borderColor="border-charcoal-outline"
|
|
className="hover:border-performance-green/40 transition-all duration-200 text-left group"
|
|
>
|
|
<Box display="flex" alignItems="start" justifyContent="between" mb={3}>
|
|
<Box width="8" height="8" rounded="lg" bg="bg-charcoal-outline" border={true} borderColor="border-charcoal-outline" overflow="hidden">
|
|
<Image
|
|
src={logoUrl}
|
|
alt={name}
|
|
width={32}
|
|
height={32}
|
|
objectFit="cover"
|
|
/>
|
|
</Box>
|
|
<Badge variant="success">
|
|
<Box w="1.5" h="1.5" rounded="full" bg="bg-performance-green" animate="pulse" mr={1} />
|
|
Recruiting
|
|
</Badge>
|
|
</Box>
|
|
|
|
<Text color="text-white" weight="semibold" block mb={1} className="group-hover:text-performance-green transition-colors line-clamp-1">
|
|
{name}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" block mb={3} className="line-clamp-2">{description}</Text>
|
|
|
|
<Stack direction="row" align="center" gap={2} wrap>
|
|
{category && (
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
|
|
<Text size="xs" color="text-purple-400">{category}</Text>
|
|
</Stack>
|
|
)}
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Icon icon={Users} size={3} color="text-gray-400" />
|
|
<Text size="xs" color="text-gray-400">{memberCount}</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Icon icon={Trophy} size={3} color="text-gray-400" />
|
|
<Text size="xs" color="text-gray-400">{totalWins} wins</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|