PhiaUi.Components.Leaderboard (phia_ui v0.1.17)

Leaderboard — ranked list with medals, avatars, metrics, and delta badges.

Inspired by Ant Design Statistics + custom patterns, Mantine leaderboard blocks. Ranks 1-3 receive gold/silver/bronze medal styling. Higher ranks use a muted badge. Avatar image is shown when :avatar_src is present; initials fallback otherwise. Delta is rendered via BadgeDelta when both :delta and :delta_type are provided.

Examples

<.leaderboard items={[
  %{rank: 1, name: "Alice",   metric: "9,842 pts", delta: "+12%", delta_type: :increase},
  %{rank: 2, name: "Bob",     metric: "8,120 pts", delta: "-3%",  delta_type: :decrease},
  %{rank: 3, name: "Charlie", metric: "7,654 pts"},
]} />

<.leaderboard items={@top_users} size={:sm} />

Summary

Functions

leaderboard(assigns)

Functions

leaderboard(assigns)

Attributes

items (:list) (required) - List of maps with:
- :rank (integer, required)
- :name (string, required)
- :metric (string, required)
- :delta (string, optional) — shown as BadgeDelta when :delta_type also present
- :delta_type (atom, optional) — see BadgeDelta for values
- :avatar_src (string, optional) — image URL; shows initials when absent
size (:atom) - Controls row height and text size. Defaults to :default. Must be one of :sm, or :default.
class (:string) - Additional CSS classes for the root element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root <ol>.