Aspect-ratio

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
6  ratio?: number | `${number}/${number}`;
7}
8 
9function AspectRatio({
10  children,
11  className,
12  ratio = 1,
13  style,
14  ...props
15}: AspectRatioProps) {
16  const aspectRatio =
17    typeof ratio === "string"
18      ? ratio
19          .split("/")
20          .map(Number)
21          .reduce((a, b) => a / b)
22      : ratio;
23 
24  return (
25    <div
26      data-slot="aspect-ratio"
27      style={{
28        ...style,
29        aspectRatio: aspectRatio.toString(),
30      }}
31      className={cn("w-full", className)}
32      {...props}
33    >
34      {children}
35    </div>
36  );
37}
38 
39export { AspectRatio };