Aspect Ratio

1import Image from "next/image"
2 
3import {
4  Example,
5  ExampleWrapper,
6} from "@/registry/base-vega/components/example"
7import { AspectRatio } from "@/registry/base-vega/ui/aspect-ratio"
8 
9export default function AspectRatioExample() {
10  return (
11    <ExampleWrapper className="max-w-4xl 2xl:max-w-4xl">
12      <AspectRatio16x9 />
13      <AspectRatio21x9 />
14      <AspectRatio1x1 />
15      <AspectRatio9x16 />
16    </ExampleWrapper>
17  )
18}
19 
20function AspectRatio16x9() {
21  return (
22    <Example title="16:9" className="items-center justify-center">
23      <AspectRatio
24        ratio={16 / 9}
25        className="rounded-lg bg-muted style-luma:rounded-3xl"
26      >
27        <Image
28          src="https://avatar.vercel.sh/shadcn1"
29          alt="Photo"
30          fill
31          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
32        />
33      </AspectRatio>
34    </Example>
35  )
36}
37 
38function AspectRatio1x1() {
39  return (
40    <Example title="1:1" className="items-start">
41      <AspectRatio
42        ratio={1 / 1}
43        className="rounded-lg bg-muted style-luma:rounded-3xl"
44      >
45        <Image
46          src="https://avatar.vercel.sh/shadcn1"
47          alt="Photo"
48          fill
49          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
50        />
51      </AspectRatio>
52    </Example>
53  )
54}
55 
56function AspectRatio9x16() {
57  return (
58    <Example title="9:16" className="items-center justify-center">
59      <AspectRatio
60        ratio={9 / 16}
61        className="rounded-lg bg-muted style-luma:rounded-3xl"
62      >
63        <Image
64          src="https://avatar.vercel.sh/shadcn1"
65          alt="Photo"
66          fill
67          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
68        />
69      </AspectRatio>
70    </Example>
71  )
72}
73 
74function AspectRatio21x9() {
75  return (
76    <Example title="21:9" className="items-center justify-center">
77      <AspectRatio
78        ratio={21 / 9}
79        className="rounded-lg bg-muted style-luma:rounded-3xl"
80      >
81        <Image
82          src="https://avatar.vercel.sh/shadcn1"
83          alt="Photo"
84          fill
85          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
86        />
87      </AspectRatio>
88    </Example>
89  )
90}