# `Monitorex.Components.Core`

Reusable UI components for the Monitorex dashboard.

Provides a cohesive design system with dark theme, responsive layout,
and accessible touch-friendly targets.

Components:
  * `data_table/1` — sortable, striped, responsive data table
  * `summary_card/1` — card with icon, label, value, trend
  * `status_badge/1` — color-coded HTTP status badge
  * `node_selector/1` — dropdown node selector
  * `page_header/1` — page title with optional subtitle and actions
  * `metric_tile/1` — compact metric display
  * `pagination/1` — page navigation with prev/next and numbered buttons
  * `back_link/1` — navigation back link

# `back_link`

Renders a back link for detail pages.

## Assigns

  * `to` — the URL to navigate back to
  * `label` — link text (default: "Back")

## Attributes

* `to` (`:string`) (required)
* `label` (`:string`) - Defaults to `"Back"`.

# `data_table`

Renders a sortable, striped data table with responsive card layout.

## Assigns

  * `columns` — list of maps with `:label`, `:key`, and optional `:sortable?` (boolean)
  * `rows` — list of maps (each map has keys matching those in columns)
  * `empty_message` — string to show when there are no rows

## Events

  * `"sort"` — sent when a sortable column header is clicked, with the column key as the value

## Attributes

* `columns` (`:list`) (required)
* `rows` (`:list`) - Defaults to `[]`.
* `empty_message` (`:string`) - Defaults to `"No data"`.
* `sort_by` (`:string`) - Defaults to `nil`.
* `sort_dir` (`:string`) - Defaults to `nil`.

# `metric_tile`

Renders a compact metric tile.

## Assigns

  * `label` — metric label
  * `value` — metric value string
  * `class` — additional CSS classes

## Attributes

* `label` (`:string`) (required)
* `value` (`:string`) (required)
* `class` (`:string`) - Defaults to `""`.

# `node_selector`

Renders a dropdown node selector.

## Assigns

  * `nodes` — list of node names (strings)
  * `selected` — currently selected node (string)
  * `event` — event name to send on change

## Attributes

* `nodes` (`:list`) (required)
* `selected` (`:string`) - Defaults to `""`.
* `event` (`:string`) - Defaults to `"select_node"`.

# `page_header`

Renders a page header with title, optional subtitle, and actions slot.

## Assigns

  * `title` — page title string
  * `subtitle` — optional subtitle string
  * `inner_block` — optional content for the actions area (right side)

## Attributes

* `title` (`:string`) (required)
* `subtitle` (`:string`) - Defaults to `nil`.
## Slots

* `inner_block`

# `pagination`

Renders a pagination control.

## Assigns

  * `current` — current page number (integer)
  * `total` — total number of pages (integer)
  * `event` — event name to send on page change (default: "go_page")

## Attributes

* `current` (`:integer`) (required)
* `total` (`:integer`) (required)
* `event` (`:string`) - Defaults to `"go_page"`.

# `status_badge`

Renders a color-coded HTTP status badge.

## Assigns

  * `status` — integer HTTP status code

Colors:
  * 2xx — green
  * 3xx — blue
  * 4xx — yellow
  * 5xx — red

## Attributes

* `status` (`:integer`) (required)

# `summary_card`

Renders a summary card with icon, label, value, and optional trend indicator.

## Assigns

  * `label` — card label string
  * `value` — display value string
  * `trend` — optional `:up` or `:down` atom for trend icon
  * `icon` — optional SVG icon HTML string (default: chart icon)
  * `class` — additional CSS classes

## Attributes

* `label` (`:string`) (required)
* `value` (`:string`) (required)
* `trend` (`:atom`) - Defaults to `nil`.Must be one of `:up`, `:down`, or `nil`.
* `icon` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `""`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*