41 lines
979 B
TypeScript
41 lines
979 B
TypeScript
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface SkillLevelButtonProps {
|
|
label: string;
|
|
icon: LucideIcon;
|
|
color: string;
|
|
bgColor: string;
|
|
borderColor: string;
|
|
count: number;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function SkillLevelButton({
|
|
label,
|
|
icon,
|
|
color,
|
|
bgColor,
|
|
borderColor,
|
|
count,
|
|
onClick,
|
|
}: SkillLevelButtonProps) {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onClick}
|
|
fullWidth
|
|
className={`${bgColor} border ${borderColor} flex items-center justify-between p-3 rounded-lg h-auto`}
|
|
>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={icon} size={4} className={color} />
|
|
<Text weight="medium" color="text-white">{label}</Text>
|
|
</Stack>
|
|
<Text size="sm" color="text-gray-400">{count} teams</Text>
|
|
</Button>
|
|
);
|
|
}
|