ResourcePicker() — supabase Function Reference

Source Code

apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.Layout.tsx lines 110–141

const ResourcePicker = ({ category, resource, renderResourceList }: ResourcePickerProps) => {
  const snap = useAppStateSnapshot()

  const [open, setOpen] = useState(false)

  const handleSelect = (value: string) => {
    snap.setActiveDocsSection([category, value])
    setOpen(false)
  }

  return (
    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
      <PopoverTrigger_Shadcn_ asChild>
        <Button
          type="default"
          size="small"
          className="w-full justify-between gap-2"
          iconRight={<Code className="rotate-90" />}
        >
          <span className="truncate">{resource ?? 'Select a resource'}</span>
        </Button>
      </PopoverTrigger_Shadcn_>
      <PopoverContent_Shadcn_ className="p-0 w-64" side="bottom" align="center">
        {renderResourceList({
          selectedResource: resource,
          onSelect: handleSelect,
          closePopover: () => setOpen(false),
        })}
      </PopoverContent_Shadcn_>
    </Popover_Shadcn_>
  )
}