82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { ChevronRight, Globe, Users } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Text } from './Text';
|
|
|
|
export interface TeamCardProps {
|
|
name: string;
|
|
description?: string;
|
|
logo?: ReactNode;
|
|
memberCount: number;
|
|
isRecruiting?: boolean;
|
|
badges?: ReactNode;
|
|
region?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export const TeamCard = ({
|
|
name,
|
|
description,
|
|
logo,
|
|
memberCount,
|
|
isRecruiting,
|
|
badges,
|
|
region,
|
|
onClick
|
|
}: TeamCardProps) => {
|
|
return (
|
|
<Card
|
|
variant="dark"
|
|
onClick={onClick}
|
|
style={{ cursor: onClick ? 'pointer' : 'default', height: '100%', display: 'flex', flexDirection: 'column' }}
|
|
>
|
|
<Box display="flex" gap={4} marginBottom={4}>
|
|
<Box width={16} height={16} rounded="lg" bg="var(--ui-color-bg-surface-muted)" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden', flexShrink: 0 }}>
|
|
{logo}
|
|
</Box>
|
|
<Box flex={1} minWidth="0">
|
|
<Box display="flex" alignItems="start" justifyContent="between" gap={2}>
|
|
<Heading level={4} weight="bold" truncate>{name}</Heading>
|
|
{isRecruiting && <Badge variant="success" size="sm">RECRUITING</Badge>}
|
|
</Box>
|
|
<Box display="flex" gap={2} flexWrap="wrap" marginTop={2}>
|
|
{badges}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem', marginBottom: '1rem' }} block leading="relaxed">
|
|
{description || 'No description available'}
|
|
</Text>
|
|
|
|
{region && (
|
|
<Box marginBottom={4}>
|
|
<Badge variant="default" size="sm">
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
|
<Icon icon={Globe} size={3} intent="primary" />
|
|
<Text size="xs" weight="bold">{region}</Text>
|
|
</div>
|
|
</Badge>
|
|
</Box>
|
|
)}
|
|
|
|
<Box marginTop="auto" paddingTop={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Icon icon={Users} size={3} intent="low" />
|
|
<Text size="xs" variant="low" font="mono">
|
|
{memberCount} {memberCount === 1 ? 'MEMBER' : 'MEMBERS'}
|
|
</Text>
|
|
</Box>
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
|
|
<Icon icon={ChevronRight} size={3} intent="low" />
|
|
</Box>
|
|
</Box>
|
|
</Card>
|
|
);
|
|
};
|