ConnectButton() — supabase Function Reference

Source Code

apps/studio/components/interfaces/ConnectButton/ConnectButton.tsx lines 14–39

export const ConnectButton = ({ buttonType = 'default' }: ConnectButtonProps) => {
  const { data: selectedProject } = useSelectedProjectQuery()
  const isActiveHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY

  const [_, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))

  return (
    <ButtonTooltip
      type={buttonType}
      disabled={!isActiveHealthy}
      className="rounded-full"
      icon={<Plug className="rotate-90" />}
      onClick={() => setShowConnect(true)}
      tooltip={{
        content: {
          side: 'bottom',
          text: !isActiveHealthy
            ? 'Project is currently not active and cannot be connected'
            : undefined,
        },
      }}
    >
      <span>Connect</span>
    </ButtonTooltip>
  )
}