web/packages/design-system/lib/components/ImageContainer/index.tsx

import Image from "../Image"
import { Typography } from "../Typography"

import styles from "./imageContainer.module.css"

type Image = {
  id: number
  title: string
  url: string
  focalPoint: {
    x: number
    y: number
  }
  dimensions?: {
    width: number
    height: number
  }
  meta: {
    alt?: string | null
    caption?: string | null
  }
}

type ImageContainerProps = {
  leftImage: Image
  rightImage: Image
}

export default function ImageContainer({
  leftImage,
  rightImage,
}: ImageContainerProps) {
  return (
    <section className={styles.container}>
      <article>
        <Image
          className={styles.image}
          src={leftImage.url}
          height={365}
          width={600}
          alt={leftImage.meta.alt || leftImage.title}
          focalPoint={leftImage.focalPoint}
          dimensions={leftImage.dimensions}
        />
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>{leftImage.meta.caption}</p>
        </Typography>
      </article>
      <article>
        <Image
          className={styles.image}
          src={rightImage.url}
          height={365}
          width={600}
          alt={rightImage.meta.alt || rightImage.title}
          focalPoint={rightImage.focalPoint}
          dimensions={rightImage.dimensions}
        />
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>{rightImage.meta.caption}</p>
        </Typography>
      </article>
    </section>
  )
}