aspect-ratio

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