Aspect Ratio

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