60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T10ae,// title: With Groups "use client"; import { Fragment } from "react"; import { Combobox, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxSeparator, } from "@/registry/default/ui/combobox"; // Grouped items demo type Tag = { id: string; label: string; group: "Status" | "Priority" | "Team" }; type TagGroup = { value: string; items: Tag[] }; const tagsData: Tag[] = [ // Status { group: "Status", id: "s-open", label: "Open" }, { group: "Status", id: "s-in-progress", label: "In progress" }, { group: "Status", id: "s-blocked", label: "Blocked" }, { group: "Status", id: "s-resolved", label: "Resolved" }, { group: "Status", id: "s-closed", label: "Closed" }, // Priority { group: "Priority", id: "p-low", label: "Low" }, { group: "Priority", id: "p-medium", label: "Medium" }, { group: "Priority", id: "p-high", label: "High" }, { group: "Priority", id: "p-urgent", label: "Urgent" }, // Team { group: "Team", id: "t-design", label: "Design" }, { group: "Team", id: "t-frontend", label: "Frontend" }, { group: "Team", id: "t-backend", label: "Backend" }, { group: "Team", id: "t-devops", label: "DevOps" }, { group: "Team", id: "t-qa", label: "QA" }, { group: "Team", id: "t-mobile", label: "Mobile" }, { group: "Team", id: "t-data", label: "Data" }, { group: "Team", id: "t-security", label: "Security" }, { group: "Team", id: "t-platform", label: "Platform" }, { group: "Team", id: "t-infra", label: "Infrastructure" }, { group: "Team", id: "t-product", label: "Product" }, { group: "Team", id: "t-marketing", label: "Marketing" }, { group: "Team", id: "t-sales", label: "Sales" }, { group: "Team", id: "t-support", label: "Support" }, { group: "Team", id: "t-research", label: "Research" }, { group: "Team", id: "t-content", label: "Content" }, { group: "Team", id: "t-analytics", label: "Analytics" }, { group: "Team", id: "t-operations", label: "Operations" }, { group: "Team", id: "t-finance", label: "Finance" }, { group: "Team", id: "t-hr", label: "HR" }, { group: "Team", id: "t-legal", label: "Legal" }, { group: "Team", id: "t-growth", label: "Growth" }, { group: "Team", id: "t-partner", label: "Partner" }, { group: "Team", id: "t-community", label: "Community" }, { group: "Team", id: "t-docs", label: "Docs" }, { group: "Team", id: "t-l10n", label: "Localization" }, { group: "Team", id: "t-a11y", label: "Accessibility" }, { group: "Team", id: "t-sre", label: "SRE" }, { group: "Team", id: "t-release", label: "Release" }, { group: "Team", id: "t-architecture", label: "Architecture" }, { group: "Team", id: "t-ux", label: "UX" }, { group: "Team", id: "t-ui", label: "UI" }, { group: "Team", id: "t-management", label: "Management" }, ]; function groupTags(tags: Tag[]): TagGroup[] { const groups: Record = {}; for (const tag of tags) { if (!groups[tag.group]) { groups[tag.group] = []; } groups[tag.group]?.push(tag); } const order: Array = ["Status", "Priority", "Team"]; return order.map((value) => ({ items: groups[value] ?? [], value })); } const groupedTags: TagGroup[] = groupTags(tagsData); export default function Particle() { return (

No tags found. {(group: TagGroup) => ( {group.value} {(tag: Tag) => ( {tag.label} )} {group.value !== "Team" && } )} ); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["@cnippet/combobox"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/default/variants/v-combobox-7.tsx","content":"$62","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]