Tag group

"use client";import { useState } from "react";import {  Tag,  TagGroup,  TagGroupLabel,  TagListView,} from "@/components/vip-ui/tag-group";const initialTags = ["Design", "Engineering", "Research"];export function TagGroupDemo() {  const [tags, setTags] = useState(initialTags);  return (    <TagGroup      onRemove={(keys) =>        setTags((current) => current.filter((tag) => !keys.has(tag)))      }    >      <TagGroupLabel>Topics</TagGroupLabel>      <TagListView        items={tags.map((name) => ({ id: name, name }))}        renderEmptyState={() => (          <span className="text-sm text-muted-foreground">No topics left.</span>        )}      >        {(item) => <Tag id={item.id}>{item.name}</Tag>}      </TagListView>    </TagGroup>  );}

"use client";import { useState } from "react";import type { Selection } from "react-aria-components";import {  Tag,  TagGroup,  TagGroupDescription,  TagGroupLabel,  TagListView,} from "@/components/vip-ui/tag-group";const amenities = [  { id: "wifi", name: "Wi-Fi" },  { id: "parking", name: "Parking" },  { id: "pool", name: "Pool" },  { id: "gym", name: "Gym" },  { id: "pets", name: "Pets allowed" },  { id: "breakfast", name: "Breakfast" },];export function TagGroupSelectionDemo() {  const [selected, setSelected] = useState<Selection>(    new Set(["wifi", "breakfast"]),  );  const count = selected === "all" ? amenities.length : selected.size;  return (    <TagGroup      selectionMode="multiple"      selectedKeys={selected}      onSelectionChange={setSelected}      disabledKeys={["pool"]}      className="max-w-sm"    >      <TagGroupLabel>Amenities</TagGroupLabel>      <TagListView items={amenities}>        {(item) => <Tag id={item.id}>{item.name}</Tag>}      </TagListView>      <TagGroupDescription>        {count === 0 ? "Showing all stays." : `${count} filters on.`}      </TagGroupDescription>    </TagGroup>  );}

"use client";import {  Tag,  TagGroup,  TagGroupLabel,  TagListView,} from "@/components/vip-ui/tag-group";const topics = [  { id: "forms", name: "Forms", href: "/components/text-field" },  { id: "overlays", name: "Overlays", href: "/components/dialog" },  { id: "collections", name: "Collections", href: "/components/table" },  { id: "motion", name: "Motion", href: "/components/motion" },];export function TagGroupLinksDemo() {  return (    <TagGroup>      <TagGroupLabel>Related topics</TagGroupLabel>      <TagListView items={topics}>        {(topic) => (          <Tag id={topic.id} href={topic.href}>            {topic.name}          </Tag>        )}      </TagListView>    </TagGroup>  );}

"use client";import { useState } from "react";import type { Size } from "@/components/vip-ui/size";import {  Tag,  TagGroup,  TagGroupLabel,  TagListView,} from "@/components/vip-ui/tag-group";const initialFilters = ["Open", "Assigned to me", "High priority"];export function TagGroupSizesDemo() {  return (    <div className="grid w-full max-w-md gap-5">      <FilterTags size="xs" />      <FilterTags size="sm" />      <FilterTags />    </div>  );}function FilterTags({ size }: { size?: Extract<Size, "xs" | "sm" | "md"> }) {  const [filters, setFilters] = useState(initialFilters);  return (    <TagGroup      size={size}      onRemove={(keys) =>        setFilters((current) => current.filter((name) => !keys.has(name)))      }    >      <TagGroupLabel>Filters</TagGroupLabel>      <TagListView        items={filters.map((name) => ({ id: name, name }))}        renderEmptyState={() => (          <span className="text-sm text-muted-foreground">No filters.</span>        )}      >        {(item) => <Tag id={item.id}>{item.name}</Tag>}      </TagListView>    </TagGroup>  );}