EnableReplicationCallout() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx lines 85–113

export const EnableReplicationCallout = ({
  type,
  className,
  hasAccess,
}: {
  type?: DestinationType | null
  className?: string
  hasAccess: boolean
}) => {
  return (
    <div className={cn('border rounded-md p-4 md:p-12 flex flex-col gap-y-4', className)}>
      <div className="flex flex-col gap-y-1">
        <h4>Replicate data to external destinations in real-time</h4>
        <p className="text-sm text-foreground-light">
          {hasAccess ? 'Enable replication' : 'Upgrade to the Pro plan'} to start replicating your
          database changes to {type ?? 'data warehouses and analytics platforms'}
        </p>
      </div>
      <div className="flex gap-x-2">
        {hasAccess ? (
          <EnableReplicationModal />
        ) : (
          <UpgradePlanButton source="replication" featureProposition="use replication" />
        )}
        <DocsButton href={`${DOCS_URL}/guides/database/replication#replication`} />
      </div>
    </div>
  )
}