badge-overflow-demo

1"use client";
2 
3import { Badge } from "@/registry/bases/base/ui/badge";
4import { BadgeOverflow } from "@/registry/bases/base/ui/badge-overflow";
5 
6const tags = [
7  "React",
8  "TypeScript",
9  "Next.js",
10  "Tailwind CSS",
11  "Shadcn UI",
12  "Radix UI",
13  "Zustand",
14  "React Query",
15  "Prisma",
16  "PostgreSQL",
17];
18 
19export default function BadgeOverflowDemo() {
20  return (
21    <div className="flex w-64 flex-col gap-8">
22      <div className="flex flex-col gap-3">
23        <h3 className="font-medium text-sm">Badge Overflow</h3>
24        <div className="w-64 rounded-md border p-3">
25          <BadgeOverflow
26            items={tags}
27            renderBadge={(_, label) => (
28              <Badge variant="secondary">{label}</Badge>
29            )}
30          />
31        </div>
32      </div>
33      <div className="flex flex-col gap-3">
34        <h3 className="font-medium text-sm">
35          Badge Overflow with Custom Overflow
36        </h3>
37        <div className="w-64 rounded-md border p-3">
38          <BadgeOverflow
39            items={tags}
40            renderBadge={(_, label) => <Badge variant="default">{label}</Badge>}
41            renderOverflow={(count) => (
42              <Badge variant="secondary" className="bg-muted">
43                +{count} more
44              </Badge>
45            )}
46          />
47        </div>
48      </div>
49    </div>
50  );
51}