86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon, ChevronRight, UserPlus } 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 { Badge } from '@/ui/Badge';
|
|
|
|
interface SkillLevelHeaderProps {
|
|
label: string;
|
|
icon: LucideIcon;
|
|
bgColor: string;
|
|
borderColor: string;
|
|
color: string;
|
|
description: string;
|
|
teamCount: number;
|
|
recruitingCount: number;
|
|
isExpanded: boolean;
|
|
onToggle: () => void;
|
|
showToggle: boolean;
|
|
}
|
|
|
|
export function SkillLevelHeader({
|
|
label,
|
|
icon,
|
|
bgColor,
|
|
borderColor,
|
|
color,
|
|
description,
|
|
teamCount,
|
|
recruitingCount,
|
|
isExpanded,
|
|
onToggle,
|
|
showToggle,
|
|
}: SkillLevelHeaderProps) {
|
|
return (
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box
|
|
display="flex"
|
|
center
|
|
width="11"
|
|
height="11"
|
|
rounded="xl"
|
|
className={`${bgColor} border ${borderColor}`}
|
|
>
|
|
<Icon icon={icon} size={5} className={color} />
|
|
</Box>
|
|
<Box>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Heading level={2}>{label}</Heading>
|
|
<Badge variant="default">
|
|
{teamCount} {teamCount === 1 ? 'team' : 'teams'}
|
|
</Badge>
|
|
{recruitingCount > 0 && (
|
|
<Badge variant="success" icon={UserPlus}>
|
|
{recruitingCount} recruiting
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
<Text size="sm" color="text-gray-500">{description}</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{showToggle && (
|
|
<Box
|
|
as="button"
|
|
type="button"
|
|
onClick={onToggle}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={1}
|
|
px={3}
|
|
py={1.5}
|
|
rounded="lg"
|
|
className="text-sm text-gray-400 hover:text-white hover:bg-iron-gray/50 transition-all"
|
|
>
|
|
<Text size="sm">{isExpanded ? 'Show less' : `View all ${teamCount}`}</Text>
|
|
<Icon icon={ChevronRight} size={4} className={`transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|