Aspect Ratio

import { AspectRatio } from "@araf-ds/core"

export default function Example() {
  return (
    <div className="w-full max-w-sm">
      <AspectRatio ratio={16 / 9}>
        <img
          src="/thumbnail.jpg"
          alt="Project thumbnail"
          className="rounded-lg object-cover w-full h-full"
        />
      </AspectRatio>
    </div>
  )
}

<AspectRatio ratio={16 / 9} className="bg-muted rounded-lg overflow-hidden">
  <video src="/intro.mp4" controls className="w-full h-full object-cover" />
</AspectRatio>

<AspectRatio ratio={4 / 3}>
  <img
    src="/slide.png"
    alt="Presentation slide"
    className="rounded-md object-cover w-full h-full"
  />
</AspectRatio>

<AspectRatio ratio={1 / 1} className="w-32">
  <img
    src="/product.jpg"
    alt="Product"
    className="rounded-full object-cover w-full h-full"
  />
</AspectRatio>

<div className="grid grid-cols-3 gap-3">
  {images.map(img => (
    <AspectRatio key={img.id} ratio={1 / 1}>
      <img
        src={img.src}
        alt={img.alt}
        className="rounded-md object-cover w-full h-full"
      />
    </AspectRatio>
  ))}
</div>