web/packages/design-system/lib/components/VideoPlayer/VideoWithCard/index.tsx

import { VariantProps } from "class-variance-authority"
import { Typography } from "../../Typography"
import { variants } from "./variants"

import { VideoPlayer } from ".."
import { VideoPlayerProps } from "../types"
import styles from "./videoWithCard.module.css"
interface TextCardProps {
  variant: "text"
  heading: string
  text?: string
}
interface QuoteCardProps {
  variant: "quote"
  quote: string
  author: string
  authorDescription?: string
}

type VideoWithCardProps = VariantProps<typeof variants> &
  (TextCardProps | QuoteCardProps) & {
    video: Pick<VideoPlayerProps, "sources" | "captions" | "focalPoint">
  }

export function VideoWithCard(props: VideoWithCardProps) {
  const { variant, style, video } = props
  const classNames = variants({
    variant,
    style,
  })

  return (
    <div className={styles.videoWithCardWrapper}>
      <div className={styles.videoWithCard}>
        <VideoPlayer variant="inline" {...video} />
        <article className={classNames}>
          <CardContent {...props} />
        </article>
      </div>
    </div>
  )
}

function CardContent(props: VideoWithCardProps) {
  if (props.variant === "quote") {
    const { quote, author, authorDescription } = props

    return (
      <>
        <Typography variant="Title/smLowCase">
          <blockquote className={styles.blockquote}>{quote}</blockquote>
        </Typography>

        <cite className={styles.cite}>
          <Typography variant="Body/Paragraph/mdBold">
            <span>{author}</span>
          </Typography>
          {authorDescription ? (
            <Typography variant="Body/Paragraph/mdRegular">
              <span>{authorDescription}</span>
            </Typography>
          ) : null}
        </cite>
      </>
    )
  }

  const { heading, text } = props

  return (
    <>
      <Typography variant="Title/smLowCase">
        <h3 className={styles.heading}>{heading}</h3>
      </Typography>
      {text ? (
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{text}</p>
        </Typography>
      ) : null}
    </>
  )
}