Packages

phoenix_duskmoon

9.9.0
9.9.2 9.9.1 9.9.0 9.8.0 9.7.1 9.7.0 9.6.4 9.6.3 9.6.2 9.6.1 9.6.0 9.5.4 9.5.3 9.5.2 9.5.1 9.5.0 9.4.3 9.4.2 9.4.1 9.4.0 9.3.0 9.2.0 9.1.4 9.1.3 9.1.1 9.1.1-rc.1 retired 9.0.1 9.0.0-rc.3 9.0.0-rc.2 9.0.0-rc.1 8.0.0 7.2.1 7.2.0 7.1.3 7.1.2 7.1.1 6.3.2 6.3.1 6.3.0 6.2.0 6.1.3 6.1.2 6.1.1 6.1.0 6.0.10 6.0.9 6.0.8 6.0.7 6.0.6 6.0.5 6.0.4 6.0.3 6.0.2 6.0.1 6.0.0 5.2.0-beta.5 5.2.0-beta.4 5.2.0-beta.3 5.2.0-beta.2 5.2.0-beta.1 5.1.0 5.0.6 5.0.5 5.0.4 5.0.3 5.0.2 5.0.1 5.0.0 4.6.6 4.6.5 4.6.4 4.6.3 4.6.2 4.6.1 4.6.0 4.5.2 4.5.1 4.5.0 4.4.4 4.4.3 4.4.2 4.4.1 4.4.0 4.3.2 4.3.1 4.3.0 4.2.0 4.1.1 4.1.0 4.0.0

Duskmoon UI component library for Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
90 Versions
7 Dependencies
Dependants
Files
Activity
phoenix_duskmoon lib phoenix_duskmoon component data_display stat.ex
Raw

lib/phoenix_duskmoon/component/data_display/stat.ex 

defmodule PhoenixDuskmoon.Component.DataDisplay.Stat do

  @moduledoc """

  Stat component for displaying key metrics and statistics.



  A simple data display component that shows a label, value, and optional

  description. Built with Tailwind utility classes and theme color variables.



  ## Examples



      <.dm_stat title="Revenue" value="$1.2M" />



      <.dm_stat title="Users" value="2,345" description="↑ 12% from last month" color="success" />



      <.dm_stat title="Errors" value="3" color="error">

        <:icon><.dm_mdi name="alert-circle" class="w-6 h-6" /></:icon>

      </.dm_stat>

  """



  use Phoenix.Component

  import PhoenixDuskmoon.Component.Helpers, only: [css_color: 1]



  @doc """

  Renders a stat display with title, value, and optional description.



  ## Examples



      <.dm_stat title="Total Users" value="1,234" />

      <.dm_stat title="Revenue" value="$45.6K" description="+12.3%" color="success" />

  """

  @doc type: :component

  attr(:id, :any, default: nil, doc: "HTML id attribute")

  attr(:class, :any, default: nil, doc: "additional CSS classes for the wrapper")

  attr(:title, :string, required: true, doc: "label/title for the stat")

  attr(:value, :string, required: true, doc: "the main value to display")

  attr(:description, :string, default: nil, doc: "optional description or change indicator")



  attr(:color, :string,

    default: nil,

    values: [

      nil,

      "primary",

      "secondary",

      "tertiary",

      "accent",

      "info",

      "success",

      "warning",

      "error"

    ],

    doc: "value text color variant"

  )



  attr(:size, :string, default: "md", values: ["sm", "md", "lg"], doc: "stat size")

  attr(:rest, :global)



  slot(:icon, doc: "Optional icon displayed alongside the value")



  def dm_stat(assigns) do

    assigns = assign(assigns, :color, css_color(assigns.color))



    ~H"""

    <div

      id={@id}

      class={[

        "flex gap-3 p-4",

        @class

      ]}

      {@rest}

    >

      <div :if={@icon != []} class={["shrink-0", value_color(@color)]}>

        {render_slot(@icon)}

      </div>

      <dl>

        <dt class={["text-on-surface-variant", title_size(@size)]}>{@title}</dt>

        <dd class={["font-semibold tracking-tight", value_color(@color), value_size(@size)]}>

          {@value}

        </dd>

        <dd :if={@description} class={["text-sm text-on-surface-variant", desc_color(@color)]}>

          {@description}

        </dd>

      </dl>

    </div>

    """

  end



  defp title_size("sm"), do: "text-xs"

  defp title_size("md"), do: "text-sm"

  defp title_size("lg"), do: "text-base"



  defp value_size("sm"), do: "text-lg"

  defp value_size("md"), do: "text-2xl"

  defp value_size("lg"), do: "text-4xl"



  defp value_color(nil), do: nil

  defp value_color("primary"), do: "text-primary"

  defp value_color("secondary"), do: "text-secondary"

  defp value_color("tertiary"), do: "text-tertiary"

  defp value_color("info"), do: "text-info"

  defp value_color("success"), do: "text-success"

  defp value_color("warning"), do: "text-warning"

  defp value_color("error"), do: "text-error"



  defp desc_color(nil), do: nil

  defp desc_color("success"), do: "text-success"

  defp desc_color("error"), do: "text-error"

  defp desc_color("warning"), do: "text-warning"

  defp desc_color(_), do: nil

end