badge-overflow-interactive-demo

1"use client";
2 
3import { X } from "lucide-react";
4import * as React from "react";
5import { Badge } from "@/registry/bases/base/ui/badge";
6import { BadgeOverflow } from "@/registry/bases/base/ui/badge-overflow";
7import { Button } from "@/registry/bases/base/ui/button";
8import { Input } from "@/registry/bases/base/ui/input";
9 
10interface Tag {
11  label: string;
12  value: string;
13}
14 
15export default function BadgeOverflowInteractiveDemo() {
16  const [tags, setTags] = React.useState<Tag[]>([
17    { label: "React", value: "react" },
18    { label: "TypeScript", value: "typescript" },
19    { label: "Next.js", value: "nextjs" },
20    { label: "Tailwind CSS", value: "tailwindcss" },
21    { label: "Shadcn UI", value: "shadcn-ui" },
22    { label: "Radix UI", value: "radix-ui" },
23    { label: "Zustand", value: "zustand" },
24    { label: "React Query", value: "react-query" },
25    { label: "Prisma", value: "prisma" },
26    { label: "PostgreSQL", value: "postgresql" },
27    { label: "MySQL", value: "mysql" },
28    { label: "MongoDB", value: "mongodb" },
29  ]);
30  const [input, setInput] = React.useState("");
31 
32  const onInputChange = React.useCallback(
33    (event: React.ChangeEvent<HTMLInputElement>) => {
34      setInput(event.target.value);
35    },
36    [],
37  );
38 
39  const onTagAdd = React.useCallback(() => {
40    if (input.trim()) {
41      setTags([
42        ...tags,
43        {
44          label: input.trim(),
45          value: input.trim(),
46        },
47      ]);
48      setInput("");
49    }
50  }, [input, tags]);
51 
52  const onTagRemove = React.useCallback(
53    (value: string) => {
54      setTags(tags.filter((tag) => tag.value !== value));
55    },
56    [tags],
57  );
58 
59  const onKeyDown = React.useCallback(
60    (event: React.KeyboardEvent<HTMLInputElement>) => {
61      if (event.key === "Enter") {
62        event.preventDefault();
63        onTagAdd();
64      }
65    },
66    [onTagAdd],
67  );
68 
69  return (
70    <div className="flex flex-col gap-6">
71      <div className="flex flex-col gap-3">
72        <h3 className="font-medium text-sm">Tags with Overflow</h3>
73        <div className="w-full max-w-80 rounded-md border p-3">
74          <BadgeOverflow
75            items={tags}
76            getBadgeLabel={(tag) => tag.label}
77            lineCount={2}
78            renderBadge={(tag, label) => (
79              <Badge
80                variant="secondary"
81                className="cursor-pointer"
82                onClick={() => onTagRemove(tag.value)}
83              >
84                <span>{label}</span>
85// … truncated