Aspect Ratio

1import { cn } from "@/lib/utils";
2 
3interface AspectRatioProps extends React.ComponentProps<"div"> {
4  ratio: number;
5}
6 
7function AspectRatio({
8  ratio,
9  className,
10  children,
11  ...props
12}: AspectRatioProps) {
13  return (
14    <div
15      data-slot="aspect-ratio-wrapper"
16      className="relative w-full"
17      style={{ paddingBottom: `${(1 / ratio) * 100}%` }}
18    >
19      <div
20        data-slot="aspect-ratio"
21        className={cn("absolute inset-0", className)}
22        {...props}
23      >
24        {children}
25      </div>
26    </div>
27  );
28}
29 
30export { AspectRatio };