Tag Group

1'use client';
2 
3import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
4import { Icon } from '@/components/ui/icon';
5import { IconShell } from '@/components/ui/icon-shell';
6import { Tag } from '@/components/ui/tag';
7import { TagToggle } from '@/components/ui/tag-toggle';
8import { type DemoExample, createLegacyDemo } from '@/lib/demo-utils';
9import { cn } from '@/lib/utils';
10 
11const basePath = import.meta.env.VITE_BASE_PATH ?? '';
12 
13function TagLeadingIcon() {
14  return (
15    <IconShell size="sm" type="neutral" variant="primary">
16      <Icon icon="style" />
17    </IconShell>
18  );
19}
20 
21/** Dismissable tag groups across sizes and shape/outline combos */
22export function TagGroupDismissable() {
23  const sizes = [
24    { size: 'default' as const, label: 'Regular' },
25    { size: 'lg' as const, label: 'Large' },
26    { size: 'sm' as const, label: 'Small' },
27    { size: 'xs' as const, label: 'Extra small' },
28  ];
29 
30  const rows = [
31    { variant: 'primary' as const, pill: false },
32    { variant: 'primary' as const, pill: true },
33    { variant: 'outline' as const, pill: false },
34    { variant: 'outline' as const, pill: true },
35  ];
36 
37  const labels = ['Label', 'Label', 'Label', 'Label'];
38 
39  return (
40    <div className="flex flex-col gap-6">
41      {sizes.map(({ size, label }) => (
42        <div key={size} className="flex flex-col gap-2">
43          <span className="text-fg-tertiary text-sm">{label}</span>
44          {rows.map(({ variant, pill }) => (
45            <div key={`${variant}-${pill}`} className="flex flex-wrap gap-2">
46              {labels.map((text, i) => (
47                <Tag
48                  key={i}
49                  size={size}
50                  pill={pill}
51                  variant={variant}
52                  onRemove={() => {}}>
53                  <TagLeadingIcon />
54                  {text}
55                </Tag>
56              ))}
57            </div>
58          ))}
59        </div>
60      ))}
61    </div>
62  );
63}
64 
65/** Dismissable tag groups with avatars across sizes and shape/outline combos */
66export function TagGroupAvatarDismissable() {
67  const sizes = [
68    { size: 'default' as const, label: 'Regular' },
69    { size: 'lg' as const, label: 'Large' },
70    { size: 'sm' as const, label: 'Small' },
71  ];
72 
73  const rows = [
74    { variant: 'primary' as const, pill: false },
75    { variant: 'primary' as const, pill: true },
76    { variant: 'outline' as const, pill: false },
77    { variant: 'outline' as const, pill: true },
78  ];
79 
80  const items = [
81// … truncated