Media Stack

import { MediaStack, fit } from '@hanzo/ui'

export function Default() {
  return <MediaStack media={{ img: photo }} constrainTo={{ w: 320, h: 240 }} />
}

240 × 240

160 × 240

320 × 120

export function Constrained() {
  return (
    <XStack flexWrap="wrap" gap="$4" items="flex-end">
      {[
        { w: 240, h: 240 },
        { w: 160, h: 240 },
        { w: 320, h: 120 },
      ].map((box) => (
        <YStack key={`${box.w}x${box.h}`} gap="$2" items="center">
          <MediaStack media={{ img: photo }} constrainTo={box} />
          <Text fontSize={12} color="$color10">
            {box.w} × {box.h}
          </Text>
        </YStack>
      ))}
    </XStack>
  )
}

export function Fit() {
  const fitted = fit(photo.dim, { w: 320, h: 240 })
  return (
    <Text fontFamily="$mono" fontSize={13} color="$color11">
      {`fit(${photo.dim.w}×${photo.dim.h}, 320×240) → ${Math.round(fitted.w)}×${Math.round(fitted.h)}`}
    </Text>
  )
}

Types

export type MediaStackProps = Omit<React.ComponentProps<typeof Box>, 'children'> & {
  media: MediaStackDef
  /** The box the media must fit inside. */
  constrainTo: Dimensions
}

Exports