Aspect Ratio

1"use client";
2 
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7const AspectRatio = ({
8  ratio,
9  className,
10  style,
11  ...props
12}: React.ComponentProps<"div"> & { ratio: number }) => (
13  <div
14    className={cn("relative aspect-(--ratio) aspect-[var(--ratio)]", className)}
15    data-slot="aspect-ratio"
16    style={
17      {
18        "--ratio": ratio,
19        ...style,
20      } as React.CSSProperties
21    }
22    {...props}
23  />
24);
25 
26export { AspectRatio };