Tag

import { Tag } from '@kivora/react';

<Tag onRemove={() => removeTag(id)}>TypeScript</Tag>

<Tag>React</Tag>

function TagExample() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'Vite']);

  const removeTag = (index: number) => {
    setTags(tags.filter((_, i) => i !== index));
  };

  return (
    <div className="flex gap-2">
      {tags.map((tag, i) => (
        <Tag key={i} onRemove={() => removeTag(i)}>
          {tag}
        </Tag>
      ))}
    </div>
  );
}

<Tag disabled onRemove={() => console.log('will not fire')}>
  Disabled Tag
</Tag>

const skills = [
  { id: 1, name: 'React', variant: 'info' },
  { id: 2, name: 'TypeScript', variant: 'success' },
  { id: 3, name: 'Node.js', variant: 'default' },
];

function SkillTags() {
  const [items, setItems] = useState(skills);

  return (
    <div className="flex flex-wrap gap-2">
      {items.map(skill => (
        <Tag
          key={skill.id}
          variant={skill.variant}
          onRemove={() => setItems(items.filter(s => s.id !== skill.id))}
        >
          {skill.name}
        </Tag>
      ))}
    </div>
  );
}