MediaBlock() — supabase Function Reference

Architecture documentation for the MediaBlock() function in Component.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ MediaBlock() — supabase Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/cms/src/blocks/MediaBlock/Component.tsx lines 19–65

export const MediaBlock: React.FC<Props> = (props) => {
  const {
    captionClassName,
    className,
    enableGutter = true,
    imgClassName,
    media,
    staticImage,
    disableInnerContainer,
  } = props

  let caption
  if (media && typeof media === 'object') caption = media.caption

  return (
    <div
      className={cn(
        '',
        {
          container: enableGutter,
        },
        className
      )}
    >
      {(media || staticImage) && (
        <Media
          imgClassName={cn('border border-border rounded-[0.8rem]', imgClassName)}
          resource={media}
          src={staticImage}
        />
      )}
      {caption && (
        <div
          className={cn(
            'mt-6',
            {
              container: !disableInnerContainer,
            },
            captionClassName
          )}
        >
          <RichText data={caption} enableGutter={false} />
        </div>
      )}
    </div>
  )
}