defmodule PrymnWeb.Button do use Phoenix.Component @doc """ Render a primary variant button. ## Examples <.primary>Click me <.primary href="/a/path" size="sm">Link button """ attr :size, :string, default: "md", values: ~w(sm md lg) attr :class, :string, default: nil attr :rest, :global, include: ~w(href navigate patch) slot :inner_block, required: true def primary(assigns), do: button(assign(assigns, :variant, "primary")) @doc """ Render a secondary variant button. ## Examples <.secondary>Click me <.secondary href="/a/path" size="sm">Link button """ attr :size, :string, default: "md", values: ~w(sm md lg) attr :class, :string, default: nil attr :rest, :global, include: ~w(href navigate patch) slot :inner_block, required: true def secondary(assigns), do: button(assign(assigns, :variant, "secondary")) @doc """ Render a tertiary variant button. ## Examples <.tertiary>Click me <.tertiary href="/a/path" size="sm">Link button """ def tertiary(assigns), do: button(assign(assigns, :variant, "tertiary")) @doc """ Render a button. """ attr :variant, :string, default: "primary" attr :size, :string, default: "md", values: ~w(sm md lg) attr :class, :string, default: nil attr :rest, :global, include: ~w(href navigate patch) slot :inner_block, required: true def button(%{rest: %{href: _}} = assigns), do: link_button(assigns) def button(%{rest: %{navigate: _}} = assigns), do: link_button(assigns) def button(%{rest: %{patch: _}} = assigns), do: link_button(assigns) def button(assigns) do assigns = button_assigns(assigns) ~H""" """ end defp button_assigns(assigns) do assign( assigns, :style, [ "inline-flex justify-center items-center rounded-2xl transition-colors", by_variant(assigns.variant), by_size(assigns.size), assigns[:class] ] ) end defp link_button(assigns) do assigns = button_assigns(assigns) ~H""" <%= render_slot(@inner_block) %> """ end defp by_size("sm"), do: "text-sm px-3 py-1" defp by_size("md"), do: "text-base px-5 py-2" defp by_size("lg"), do: "text-lg px-7 py-3" defp by_variant("primary"), do: "font-medium bg-black text-white shadow active:shadow-sm hover:bg-slate-800 active:text-white/80" defp by_variant("secondary"), do: "font-medium bg-transparent border shadow active:shadow-sm border-slate-800 text-slate-800 hover:bg-slate-800 hover:text-white active:text-white/80" defp by_variant("tertiary"), do: "font-medium border-none text-black hover:bg-slate-50 focus:bg-slate-50 active:text-black/80" end