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

export default function AspectRatioDemo() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-3 gap-6">
      <div className="col-span-2 rounded-xl bg-surface p-3 shadow-clay">
        <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-[1.2rem] bg-linear-to-br from-primary-container via-tertiary-container to-accent-container shadow-well">
          <div className="grid size-full place-items-center text-sm font-bold text-on-primary-container">16 / 9</div>
        </AspectRatio>
      </div>
      <div className="rounded-xl bg-surface p-3 shadow-clay">
        <AspectRatio ratio={1} className="grid place-items-center rounded-[1.2rem] bg-secondary-container shadow-well">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/pface-chubby.svg" alt="Parlemen mascot" className="size-3/4 object-contain" />
        </AspectRatio>
      </div>
    </div>
  );
}
Installation
