Tag Group

"use client"

import { Label } from "@/components/jk/input"
import { Tag, TagGroup, TagList } from "@/components/jk/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 const DemoTagGroup = () => {
    return (
        <>
            <TagGroup selectionMode="multiple">
                <Label>Android Brands</Label>
                <TagList items={androidBrands}>{(item) => <Tag>{item.name}</Tag>}</TagList>
            </TagGroup>
        </>
    )
}

"use client"

import { useListData } from "react-stately"
import { Tag, TagGroup, TagList } from "@/components/jk/tag-group"

export const TagGroupWithRemove = () => {
  const list = useListData({
    initialItems: [
      { id: "1", name: "Ferrari", available: true },
      { id: "2", name: "Lamborghini", available: false },
      { id: "3", name: "Porsche", available: true },
      { id: "4", name: "Bugatti", available: false },
      { id: "5", name: "McLaren", available: true },
      { id: "6", name: "Aston Martin", available: true },
      { id: "7", name: "Bentley", available: false },
      { id: "8", name: "Rolls-Royce", available: true },
      { id: "9", name: "Maserati", available: false },
      { id: "10", name: "Jaguar", available: true },
    ],
  })

  return (
    <TagGroup
      selectionMode="multiple"
      aria-label="Car Brands"
      className="max-w-sm"
      onRemove={(keys) => list.remove(...keys)}
    >
      <TagList items={list.items}>{(item) => <Tag>{item.name}</Tag>}</TagList>
    </TagGroup>
  )
}