defmodule Phoenix.UI.Components.Paper do @moduledoc """ Provides paper component. """ use Phoenix.UI, :component attr(:blur, :boolean, default: false) attr(:element, :string, default: "div") attr(:elevation, :integer, default: 2, values: 1..5) attr(:extend_class, :string) attr(:rest, :global, include: ~w(open)) attr(:square, :boolean, default: false) attr(:variant, :string, default: "elevated", values: ["elevated", "outlined"]) slot(:inner_block, required: true) @doc """ Renders paper component ## Examples ``` <.paper> content """ @spec paper(Socket.assigns()) :: Rendered.t() def paper(assigns) do assigns = assign_class(assigns, ~w( paper transition-all ease-in-out duration-300 #{classes(:blur, assigns)} #{classes(:elevation, assigns)} #{classes(:square, assigns)} #{classes(:variant, assigns)} )) ~H""" <.dynamic_tag class={@class} name={@element} {@rest}> <%= render_slot(@inner_block) %> """ end ### CSS Classes ########################## # Blur defp classes(:blur, %{blur: false, variant: "elevated"}), do: "bg-white dark:bg-slate-800" defp classes(:blur, %{blur: true, variant: "elevated"}) do "bg-white/75 dark:bg-slate-800/75 backdrop-blur" end defp classes(:blur, %{blur: blur, variant: "elevated"}) do "bg-white/75 dark:bg-slate-800/75 backdrop-blur-#{blur}" end # Elevation defp classes(:elevation, %{variant: "outlined"}), do: nil defp classes(:elevation, %{elevation: 0}), do: "shadow-none" defp classes(:elevation, %{elevation: 1}), do: "shadow-sm" defp classes(:elevation, %{elevation: 2}), do: "shadow" defp classes(:elevation, %{elevation: 3}), do: "shadow-lg" defp classes(:elevation, %{elevation: 4}), do: "shadow-xl" defp classes(:elevation, %{elevation: 5}), do: "shadow-2xl" # Square defp classes(:square, %{square: false}), do: "rounded-lg" # Variant defp classes(:variant, %{variant: "elevated"}) do "border boder-slate-200 dark:border-slate-700" end defp classes(:variant, %{variant: "outlined"}), do: "border dark:border-slate-500" defp classes(_rule_group, _assigns), do: nil end