Skip to main content

lib/shadix/components/aspect_ratio.ex

defmodule Shadix.Components.AspectRatio do
  @moduledoc """
  Aspect ratio component, translated from the shadcn/ui (new-york-v4) aspect-ratio.

  shadcn re-exports Radix's `AspectRatio.Root`, which carries no Tailwind classes
  of its own. This presentational version renders a `<div data-slot="aspect-ratio">`
  and applies the ratio via the CSS `aspect-ratio` property.
  """
  use Phoenix.Component

  import Shadix.Cn

  attr(:ratio, :string, default: "1 / 1")
  attr(:class, :string, default: nil)
  attr(:rest, :global)
  slot(:inner_block, required: true)

  def aspect_ratio(assigns) do
    assigns = assign(assigns, :computed_class, cn([assigns.class]))

    ~H"""
    <div data-slot="aspect-ratio" class={@computed_class} style={"aspect-ratio: #{@ratio}"} {@rest}>
      {render_slot(@inner_block)}
    </div>
    """
  end
end