Tag Group

"use client";

import { Label } from "@/components/ui/field";
import { Tag, TagGroup, TagList } from "@/components/ui/tag-group";

export const androidBrands = [
  { id: "1", name: "Samsung", available: false },
  { id: "2", name: "OnePlus", available: true },
  { id: "3", name: "Google", available: true },
  { id: "4", name: "Xiaomi", available: false },
];

export default function TagGroupDemo() {
  return (
    <TagGroup selectionMode="multiple">
      <Label>Android Brands</Label>
      <TagList items={androidBrands}>
        {(item) => <Tag>{item.name}</Tag>}
      </TagList>
    </TagGroup>
  );
}