Aspect Ratio

1"use client";
2 
3import "./aspect-ratio.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { AspectRatioContext } from "./aspect-ratio.context";
8import { aspectRatioVariants, type AspectRatioVariants } from "./aspect-ratio.variants";
9 
10export type AspectRatioProps = {
11  /**
12   * The desired aspect ratio (width / height).
13   * @default 16 / 9
14   */
15  ratio?: number;
16} & AspectRatioVariants & React.ComponentProps<"div">;
17 
18export const AspectRatioRoot = ({
19  children,
20  className,
21  ratio = 16 / 9,
22  style,
23  ...props
24}: AspectRatioProps) => {
25  const slots = aspectRatioVariants();
26 
27  return (
28    <AspectRatioContext.Provider value={{ slots }}>
29      <div
30        className={cn(slots.root(), className)}
31        style={{ aspectRatio: `${ratio}`, ...style }}
32        {...props}
33      >
34        {children}
35      </div>
36    </AspectRatioContext.Provider>
37  );
38};
39 
40export const AspectRatio = AspectRatioRoot;