Removable

1'use client'
2 
3import { useState } from 'react'
4import { XIcon } from 'lucide-react'
5 
6import { Badge } from '@/components/ui/badge'
7 
8const initialTags = ['Design', 'Engineering', 'Marketing', 'Sales']
9 
10export function Badge08() {
11  const [tags, setTags] = useState(initialTags)
12 
13  return (
14    <div className="flex flex-wrap items-center gap-2">
15      {tags.map((tag) => (
16        <Badge key={tag} variant="secondary">
17          {tag}
18          <button
19            type="button"
20            onClick={() => setTags((prev) => prev.filter((t) => t !== tag))}
21            aria-label={`Remove ${tag}`}
22            className="data-[icon=inline-end]:-mr-0.5 rounded-full opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
23            data-icon="inline-end"
24          >
25            <XIcon className="size-3" />
26          </button>
27        </Badge>
28      ))}
29      {tags.length === 0 && (
30        <button
31          type="button"
32          onClick={() => setTags(initialTags)}
33          className="text-muted-foreground text-xs underline-offset-4 hover:underline"
34        >
35          Reset
36        </button>
37      )}
38    </div>
39  )
40}