Aspect Ratio

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