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, VideoPlayerProps } from '..'
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}
    </>
  )
}