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

import { cva, cx } from 'class-variance-authority'

import styles from './skeleton.module.css'

const variants = cva(styles.shimmer, {
  variants: {
    contrast: {
      light: styles.light,
      dark: styles.dark,
    },
    display: {
      block: styles.block,
      'inline-block': styles.inlineBlock,
    },
  },
  defaultVariants: {
    contrast: 'light',
    display: 'inline-block',
  },
})

export default function SkeletonShimmer({
  className,
  height,
  width,
  contrast = 'light',
  display = 'inline-block',
}: {
  className?: string
  height?: string
  width?: string
  contrast?: 'light' | 'dark'
  display?: 'block' | 'inline-block'
}) {
  return (
    <span
      className={cx(className, variants({ contrast, display }))}
      style={{
        height: height,
        width: width,
        maxWidth: '100%',
      }}
    >
      {/* zero width space, allows for font styles to affect height */}
      <span aria-hidden="true">&#8203;</span>
    </span>
  )
}