Aspect Ratio

import { cn } from "cn"

function AspectRatio({
  ratio,
  className,
  ...props
}: React.ComponentProps<"div"> & { ratio: number }) {
  return (
    <div
      data-slot="aspect-ratio"
      style={
        {
          "--ratio": ratio,
        } as React.CSSProperties
      }
      className={cn("relative aspect-(--ratio)", className)}
      {...props}
    />
  )
}

export { AspectRatio }

import { AspectRatio } from "@/components/ui/aspect-ratio"

// The copy: change text here, not in the markup.
const COPY = {
  alt: "A painted planet over a dark horizon",
} as const

/** Aspect Ratio holding a 16:9 picture. */
export default function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
      <img
        src="https://01orbital.dev/art/kit/celestograph-369187-meridian-1b.png"
        alt={COPY.alt}
        className="size-full rounded-lg object-cover"
      />
    </AspectRatio>
  )
}