"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface AspectRatioBoxProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Aspect ratio as width/height (e.g., 16/9, 4/3, 1) */
  ratio?: number;
  /** Maximum width of the container */
  maxWidth?: number | string;
  /** Whether to center the content within the container */
  centered?: boolean;
}

/**
 * Container that maintains a specified aspect ratio.
 * Useful for images, videos, embeds, and responsive layouts.
 */
function AspectRatioBox({
  ratio = 16 / 9,
  maxWidth,
  centered = true,
  className,
  children,
  ...props
}: AspectRatioBoxProps) {
  return (
    <div
      className={cn(
        "relative w-full overflow-hidden rounded-lg",
        className
      )}
      style={{
        maxWidth: maxWidth
          ? typeof maxWidth === "number"
            ? `${maxWidth}px`
            : maxWidth
          : undefined,
        aspectRatio: ratio,
        backgroundColor: "hsl(var(--muted))",
      }}
      {...props}
    >
      <div
        className={cn(
          "absolute inset-0",
          centered && "flex items-center justify-center"
        )}
      >
        {children}
      </div>
    </div>
  );
}

/**
 * Common aspect ratio presets for convenience.
 */
const AspectRatioPresets = {
  square: 1,
  video: 16 / 9,
  widescreen: 21 / 9,
  portrait: 3 / 4,
  landscape: 4 / 3,
  photo: 3 / 2,
  golden: 1.618,
} as const;

export { AspectRatioBox, AspectRatioPresets };
Aspect Ratio Box

Dependencies

Files

Installation
