Aspect Ratio

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

export function AspectRatioDemo() {
  return (
    <div className="w-[450px]">
      <AspectRatio ratio={16 / 9} className="bg-muted rounded-md">
        <div className="flex h-full items-center justify-center">
          <p className="text-muted-foreground text-sm">16:9 Aspect Ratio</p>
        </div>
      </AspectRatio>
    </div>
  )
}

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

export function AspectRatioVideo() {
  return (
    <div className="w-[450px]">
      <AspectRatio
        ratio={16 / 9}
        className="bg-muted overflow-hidden rounded-md"
      >
        <iframe
          className="h-full w-full"
          src="https://www.youtube.com/embed/dQw4w9WgXcQ"
          title="YouTube video player"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
        />
      </AspectRatio>
    </div>
  )
}

import Image from "next/image"

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

export function AspectRatioImage() {
  return (
    <div className="w-[450px]">
      <AspectRatio
        ratio={16 / 9}
        className="bg-muted overflow-hidden rounded-md"
      >
        <Image
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Photo by Drew Beamer"
          fill
          className="object-cover"
        />
      </AspectRatio>
    </div>
  )
}

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

export function AspectRatioCustom() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <div className="space-y-2">
        <p className="text-sm font-medium">1:1 (Square)</p>
        <AspectRatio ratio={1} className="bg-muted rounded-md">
          <div className="flex h-full items-center justify-center">
            <p className="text-muted-foreground text-sm">1:1</p>
          </div>
        </AspectRatio>
      </div>
      <div className="space-y-2">
        <p className="text-sm font-medium">4:3 (Standard)</p>
        <AspectRatio ratio={4 / 3} className="bg-muted rounded-md">
          <div className="flex h-full items-center justify-center">
            <p className="text-muted-foreground text-sm">4:3</p>
          </div>
        </AspectRatio>
      </div>
      <div className="space-y-2">
        <p className="text-sm font-medium">3:2 (Photo)</p>
        <AspectRatio ratio={3 / 2} className="bg-muted rounded-md">
          <div className="flex h-full items-center justify-center">
            <p className="text-muted-foreground text-sm">3:2</p>
          </div>
        </AspectRatio>
      </div>
      <div className="space-y-2">
        <p className="text-sm font-medium">21:9 (Cinematic)</p>
        <AspectRatio ratio={21 / 9} className="bg-muted rounded-md">
          <div className="flex h-full items-center justify-center">
            <p className="text-muted-foreground text-sm">21:9</p>
          </div>
        </AspectRatio>
      </div>
    </div>
  )
}