Combobox

()=> {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState('')
  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'
    }
  ]
  return (
    <Combobox open={open} onOpenChange={setOpen}>
      <ComboboxTrigger asChild>
        <Button
          variant='outline'
          role='combobox'
          aria-expanded={open}
          style={{
            width: '200px',
            justifyContent: 'space-between',
            display: 'flex',
            border: '1px solid #D1D5DB',
            borderRadius: '0.375rem',
            padding: '0.5rem 1rem',
            backgroundColor: 'transparent',
            cursor: 'pointer'
          }}
        >
          {value
            ? frameworks.find((framework) => framework.value === value)?.label
            : 'Select framework...'}
        </Button>
      </ComboboxTrigger>
      <ComboboxContent style={{ width: '200px', padding: 0 }}>
        <ComboboxMenu>
          <ComboboxMenuInput
            placeholder='Search framework...'
            style={{ height: '36px' }}
          />
          <ComboboxMenuList>
            <ComboboxMenuEmpty>No framework found.</ComboboxMenuEmpty>
            <ComboboxMenuGroup>
              {frameworks.map((framework) => (
                <ComboboxMenuItem
                  key={framework.value}
                  value={framework.value}
                  onSelect={(currentValue) => {
                    setValue(currentValue === value ? '' : currentValue)
                    setOpen(false)
                  }}
                >
                  {framework.label}
                </ComboboxMenuItem>
              ))}
            </ComboboxMenuGroup>
          </ComboboxMenuList>
        </ComboboxMenu>
      </ComboboxContent>
    </Combobox>
  )
}