CMSLink() — supabase Function Reference

Architecture documentation for the CMSLink() function in index.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ CMSLink() — supabase Function Reference

Dependency Diagram

graph TD
  9de795d5_5c80_56a0_46e4_d05d99031c45["CMSLink()"]
  6215f5f8_959b_0d27_9c02_ce5f395aab88["cn()"]
  9de795d5_5c80_56a0_46e4_d05d99031c45 -->|calls| 6215f5f8_959b_0d27_9c02_ce5f395aab88
  style 9de795d5_5c80_56a0_46e4_d05d99031c45 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/cms/src/components/Link/index.tsx lines 23–64

export const CMSLink: React.FC<CMSLinkType> = (props) => {
  const {
    type,
    appearance = 'inline',
    children,
    className,
    label,
    newTab,
    reference,
    size: sizeFromProps,
    url,
  } = props

  const href =
    type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
      ? `/${reference.value.slug}`
      : url

  if (!href) return null

  const size = appearance === 'link' ? 'clear' : sizeFromProps
  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}

  /* Ensure we don't break any styles set by richText */
  if (appearance === 'inline') {
    return (
      <Link className={cn(className)} href={href || url || ''} {...newTabProps}>
        {label && label}
        {children && children}
      </Link>
    )
  }

  return (
    <Button asChild className={className} size={size} variant={appearance}>
      <Link className={cn(className)} href={href || url || ''} {...newTabProps}>
        {label && label}
        {children && children}
      </Link>
    </Button>
  )
}