# `PhiaUi.Components.NotificationCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/notification_card.ex#L1)

Notification/alert card with type-based color coding and dismiss support.

Displays a title, optional message body, timestamp, and an icon that
automatically matches the `type`. Optionally shows a dismiss button that
fires a LiveView event when clicked. The card can be visually dimmed to
indicate "already read" state.

## Severity types

| `:type`      | Left border colour | Default icon         |
|--------------|--------------------|----------------------|
| `:info`      | `border-l-blue-500`    | `information-circle` |
| `:success`   | `border-l-emerald-500` | `check-circle`       |
| `:warning`   | `border-l-amber-500`   | `exclamation-triangle`|
| `:error`     | `border-l-red-500`     | `x-circle`           |

## Dismiss support

Set `dismissible={true}` and provide `on_dismiss` with a LiveView event
name. An `×` button renders at the top-right; clicking it fires the event
with `phx-click`. Handle the event in your LiveView to remove the
notification from state.

## Read state

Set `read={true}` to apply `opacity-60` — useful for marking a notification
as acknowledged without removing it from the list.

## Custom icon slot

Override the default type icon by providing the `:icon` slot:

    <.notification_card title="Build succeeded" type={:success}>
      <:icon><.icon name="rocket" class="text-emerald-500" /></:icon>
    </.notification_card>

## Examples

    <%!-- Info notification --%>
    <.notification_card
      title="New message from Alice"
      message="Hey, are you free for a call?"
      timestamp="2 min ago"
      type={:info}
    />

    <%!-- Error with dismiss --%>
    <.notification_card
      title="Payment failed"
      message="Your card was declined. Please update your billing information."
      type={:error}
      dismissible={true}
      on_dismiss="dismiss_notification"
      read={false}
    />

    <%!-- Notification list from state --%>
    <div class="space-y-2">
      <.notification_card
        :for={notif <- @notifications}
        title={notif.title}
        message={notif.body}
        timestamp={notif.relative_time}
        type={notif.type}
        read={notif.read}
        dismissible={true}
        on_dismiss="dismiss_notif"
      />
    </div>

# `notification_card`

Renders a notification card with a colored left border and type icon.

The card has three optional regions:

- **Icon area** — type-specific icon on the left (or custom `:icon` slot).
- **Content area** — title, optional body `message`, optional `timestamp`.
- **Actions slot** — buttons rendered below the message.

A dismiss button (`×`) appears at the top-right when `dismissible={true}`.
The `on_dismiss` event name drives a `phx-click` attribute on that button.

## Examples

    <%!-- Success notification --%>
    <.notification_card
      title="Profile updated"
      message="Your changes have been saved."
      type={:success}
      timestamp="just now"
    />

    <%!-- Dismissible error --%>
    <.notification_card
      title="Upload failed"
      message="File exceeds the 10 MB limit."
      type={:error}
      dismissible={true}
      on_dismiss="clear_error"
    />

## Attributes

* `title` (`:string`) (required) - Notification title.
* `message` (`:string`) - Notification body text. Defaults to `nil`.
* `timestamp` (`:string`) - Timestamp label (e.g. '2 min ago'). Defaults to `nil`.
* `type` (`:atom`) - Severity type — controls border color and icon. Defaults to `:info`. Must be one of `:info`, `:success`, `:warning`, or `:error`.
* `dismissible` (`:boolean`) - Show dismiss (X) button. Defaults to `false`.
* `on_dismiss` (`:string`) - phx-click event for dismiss button. Defaults to `nil`.
* `read` (`:boolean`) - Dim the card when already read. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the outer div.
## Slots

* `icon` - Custom icon override (replaces default type icon).
* `actions` - Action buttons rendered at the bottom.

---

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