Combobox

import { Combobox } from "@/components/ui/combobox"

"use client"

import React from "react"
import { Combobox } from "@/components/ui/combobox"

const frameworks = [
  {
    value: "next.js",
    label: "Next.js",
  },
  {
    value: "sveltekit",
    label: "SvelteKit",
  },
  {
    value: "nuxt.js",
    label: "Nuxt.js",
  },
  {
    value: "remix",
    label: "Remix",
  },
  {
    value: "astro",
    label: "Astro",
  },
]

export function ComboboxDemo() {
  const [value, setValue] = React.useState("")

  return (
    <Combobox
      options={frameworks}
      value={value}
      onChange={setValue}
      placeholder="Select framework..."
    />
  )
}

<Combobox
  loading={loading}
  onChange={setValue}
  onInputValueChange={setQuery}
  options={options}
  emptyState="No topics match that query."
  value={value}
/>

<Combobox
  options={BROKERS}
  renderOption={(option) => {
    const meta = option.data as BrokerMeta | undefined;
    return (
      <div className="flex flex-col">
        <span className="font-medium text-sm">{option.label}</span>
        {meta ? <span className="text-muted-foreground text-xs">{meta.host} · {meta.dc}</span> : null}
      </div>
    );
  }}
  onChange={setValue}
  value={value}
/>

const OPTIONS: ComboboxOption[] = [
  { value: 'reader', label: 'Reader' },
  { value: 'maintainer', label: 'Maintainer', disabled: true },
  { value: 'admin', label: 'Admin', disabled: true },
];