supabase/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx

import { Box, Check, ChevronDown } from 'lucide-react'
import { useState } from 'react'
import {
  Button,
  cn,
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from 'ui'

import { ConnectionType } from './Connect.constants'
import { ConnectionIcon } from './ConnectionIcon'

interface ConnectDropdownProps {
  state: string
  updateState: (state: string) => void
  label: string
  items: ConnectionType[]
  iconFolder?: string
  supportsDarkMode?: boolean
}

export const ConnectDropdown = ({
  state,
  updateState,
  label,

  items,
  iconFolder,
  supportsDarkMode,
}: ConnectDropdownProps) => {
  const [open, setOpen] = useState(false)

  function onSelectLib(key: string) {
    updateState(key)
    setOpen(false)
  }

  const selectedItem = items.find((item) => item.key === state)

  return (
    <Popover open={open} onOpenChange={setOpen} modal={false}>
      <div className="flex ">
        <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
          {label}
        </span>
        <PopoverTrigger asChild>
          <Button
            size="small"
            type="default"
            className="gap-0 rounded-l-none"
            iconRight={<ChevronDown strokeWidth={1.5} />}
          >
            <div className="flex items-center gap-2">
              {selectedItem?.icon ? (
                <ConnectionIcon
                  icon={selectedItem.icon}
                  iconFolder={iconFolder}
                  supportsDarkMode={supportsDarkMode}
                />
              ) : (
                <Box size={12} />
              )}
              {selectedItem?.label}
            </div>
          </Button>
        </PopoverTrigger>
      </div>
      <PopoverContent className="p-0 max-w-48" side="bottom" align="start">
        <Command>
          <CommandInput placeholder="Search..." />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup>
              {items.map((item) => (
                <CommandItem
                  key={item.key}
                  value={item.key}
                  onSelect={() => {
                    onSelectLib(item.key)
                    setOpen(false)
                  }}
                  className="flex gap-2 items-center"
                >
                  {item.icon ? (
                    <ConnectionIcon
                      icon={item.icon}
                      iconFolder={iconFolder}
                      supportsDarkMode={supportsDarkMode}
                    />
                  ) : (
                    <Box size={12} />
                  )}
                  {item.label}
                  <Check
                    size={15}
                    className={cn('ml-auto  ', item.key === state ? 'opacity-100' : 'opacity-0')}
                  />
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}