Badge

1"use client";
2 
3import { useState } from "react";
4import { Badge } from "@/components/ui/badge";
5import { XIcon } from "lucide-react";
6 
7export default function BadgeWithDismiss() {
8  const [badges, setBadges] = useState([
9    { id: 1, label: "Next.js" },
10    { id: 2, label: "Tailwind CSS" },
11    { id: 3, label: "Laravel" }
12  ]);
13 
14  function removeBadge(id: number) {
15    setBadges((prev) => prev.filter((badge) => badge.id !== id));
16  }
17 
18  return (
19    <div className="flex items-center justify-center gap-2">
20      {badges.map(({ id, label }) => (
21        <Badge
22          key={id}
23          variant="secondary"
24          className="flex cursor-pointer items-center gap-1 hover:opacity-80"
25          onClick={() => removeBadge(id)}>
26          {label}
27          <XIcon className="size-3" />
28        </Badge>
29      ))}
30    </div>
31  );
32}