Combobox

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@smaller-earth/ui"

const BRANDS = [
  { value: "smaller-earth", label: "Smaller Earth" },
  { value: "campfront", label: "Campfront" },
  { value: "camp-leaders", label: "Camp Leaders" },
  { value: "resort-leaders", label: "Resort Leaders" },
  { value: "camp-collab", label: "Camp Collab" },
]

<Combobox items={BRANDS}>
  <ComboboxInput placeholder="Search brands" />
  <ComboboxContent>
    <ComboboxEmpty>No brands found.</ComboboxEmpty>
    <ComboboxList>
      {(brand) => <ComboboxItem value={brand}>{brand.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxContent>
</Combobox>