Combobox

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

<Combobox.Root open={open} onOpenChange={setOpen}>
  <Combobox.Trigger css={{ w: 200 }}>
    {value ? fruits.find((fruit) => fruit.value === value)?.label : 'Select fruit...'}
  </Combobox.Trigger>
  <Combobox.Content placeholder="Search fruit..." css={{ w: 200 }}>
    <Combobox.Group heading="Fruit">
      <Combobox.Item
        value={'apple'}
        onSelect={handleSelect}
        selected={value === fruit.value}
        icon={...}
      >
        Apple
      </Combobox.Item>
      <Combobox.Item
        value={'banana'}
        onSelect={handleSelect}
        selected={value === fruit.value}
        icon={...}
      >
        Banana
      </Combobox.Item>
      <Combobox.Item
        value={'grapes'}
        onSelect={handleSelect}
        selected={value === fruit.value}
        icon={...}
      >
        Grapes
      </Combobox.Item>
    </Combobox.Group>
  </Combobox.Content>
</Combobox.Root>