lib/phoenix/ui/components/description_list.ex

defmodule Phoenix.UI.Components.DescriptionList do
  @moduledoc """
  Provides description list component.
  """
  use Phoenix.UI, :component

  @default_variant :simple
  @default_striped false

  @doc """
  Renders description list component.

  ## Examples

      ```
      <.dl>
        <:dt>Term</:dt>
        <:dd>Description</:dd>
      </.dl>
      ```

  """
  @spec dl(Socket.assigns()) :: Rendered.t()
  def dl(raw_assigns) do
    assigns =
      raw_assigns
      |> assign_new(:striped, fn -> @default_striped end)
      |> assign_new(:variant, fn -> @default_variant end)
      |> assign_new(:dt, fn -> [] end)
      |> assign_new(:dd, fn -> [] end)
      |> build_rows()

    ~H"""
    <dl>
      <%= for {dt, dd} <- @rows do %>
        <div class="odd:bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt class="text-sm font-medium text-gray-500">
            <%= render_slot(dt) %>
          </dt>
          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
            <%= render_slot(dd) %>
          </dd>
        </div>
      <% end %>
    </dl>
    """
  end

  defp build_rows(%{dt: dt, dd: dd} = assigns), do: assign(assigns, :rows, Enum.zip(dt, dd))
end