badge-overflow-multiline-demo

1"use client";
2 
3import { Badge } from "@/registry/bases/base/ui/badge";
4import { BadgeOverflow } from "@/registry/bases/base/ui/badge-overflow";
5 
6const technologies = [
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  "Docker",
18  "Kubernetes",
19  "AWS",
20  "Vercel",
21  "GitHub Actions",
22];
23 
24export default function BadgeOverflowMultilineDemo() {
25  return (
26    <div className="flex flex-col gap-8">
27      <div className="flex flex-col gap-3">
28        <h3 className="font-medium text-sm">Single Line (default)</h3>
29        <div className="w-64 rounded-md border p-3">
30          <BadgeOverflow
31            items={technologies}
32            renderBadge={(_, label) => (
33              <Badge variant="secondary">{label}</Badge>
34            )}
35          />
36        </div>
37      </div>
38      <div className="flex flex-col gap-3">
39        <h3 className="font-medium text-sm">Two Lines</h3>
40        <div className="w-64 rounded-md border p-3">
41          <BadgeOverflow
42            items={technologies}
43            lineCount={2}
44            renderBadge={(_, label) => <Badge variant="outline">{label}</Badge>}
45          />
46        </div>
47      </div>
48      <div className="flex flex-col gap-3">
49        <h3 className="font-medium text-sm">Three Lines</h3>
50        <div className="w-64 rounded-md border p-3">
51          <BadgeOverflow
52            items={technologies}
53            lineCount={3}
54            renderBadge={(_, label) => <Badge variant="default">{label}</Badge>}
55          />
56        </div>
57      </div>
58    </div>
59  );
60}