49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Group } from '@/ui/Group';
|
|
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
|
|
style={{
|
|
padding: '0.75rem',
|
|
height: 'auto',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
borderRadius: 'var(--ui-radius-lg)'
|
|
}}
|
|
>
|
|
<Group gap={2}>
|
|
<Icon icon={icon} size={4} className={color} />
|
|
<Text weight="medium" variant="high">{label}</Text>
|
|
</Group>
|
|
<Text size="sm" variant="low">{count} teams</Text>
|
|
</Button>
|
|
);
|
|
}
|