ConnectionStringMethodSelectItem() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx lines 636–675

const ConnectionStringMethodSelectItem = ({
  method,
  poolerBadge,
}: {
  method: ConnectionStringMethod
  poolerBadge?: string
}) => {
  const badges: ReactNode[] = []

  if (method !== 'direct') {
    badges.push(
      <Badge key="direct" className="flex gap-x-1">
        Shared Pooler
      </Badge>
    )
  }
  if (poolerBadge === 'Dedicated Pooler') {
    badges.push(
      <Badge key="dedicated" className="flex gap-x-1">
        {poolerBadge}
      </Badge>
    )
  }

  return (
    <SelectItem_Shadcn_ value={method} className="[&>span:first-child]:top-3.5">
      <div className="flex flex-col w-full py-1">
        <div className="flex gap-x-2 items-center">
          {connectionStringMethodOptions[method].label}
        </div>
        <div className="text-foreground-lighter text-xs">
          {connectionStringMethodOptions[method].description}
        </div>
        <div className="flex items-center gap-0.5 flex-wrap mt-1.5">
          {badges.map((badge) => badge)}
        </div>
      </div>
    </SelectItem_Shadcn_>
  )
}