Search documentation of phoenix_kit

# PhoenixKitWeb.Components.Core.ModuleCard (phoenix_kit v1.6.19)

View Source

Provides a module card UI component for the Modules Overview page.

This component renders a card displaying a system module with a toggle switch, status badges, action buttons, and optional configuration stats. Each module can have custom badges, buttons, and stats displayed through slots.

# Summary

## Functions

module_card(assigns)

Renders a module card with header, toggle, status, actions, and optional stats.

# Functions

# module_card(assigns)

Renders a module card with header, toggle, status, actions, and optional stats.

## Examples

    <.module_card
      title="Referral Codes"
      description="Manage referral codes for user registration and monitoring"
      icon="🎫"
      enabled={assigns.module_enabled}
      toggle_event="toggle_module"
    >
      <:status_badges>
        <span class="badge badge-success">
          Enabled
        </span>
        <span class="badge badge-outline ml-2">
          Optional
        </span>
      </:status_badges>

      <:action_buttons>
        <.link navigate="/admin/settings/module" class="btn btn-primary btn-sm">
          Configure
        </.link>
      </:action_buttons>

      <:stats>
        <div class="grid grid-cols-2 gap-2 text-xs">
          <div>
            <span class="text-base-content/70">Max per user:</span>
            <span class="font-medium">5</span>
          </div>
        </div>
      </:stats>
    </.module_card>

## Attributes

- `title` (`:string`) (required) - Module title.
- `description` (`:string`) (required) - Module description text.
- `icon` (`:string`) (required) - Emoji icon for the module.
- `enabled` (`:boolean`) (required) - Whether the module is enabled.
- `toggle_event` (`:string`) (required) - Phoenix event name for the toggle switch.
- `show_toggle` (`:boolean`) - Whether to show the toggle switch. Defaults to `true`.

## Slots

- `status_badges` (required) - Status badges to display (left side of actions row).
- `action_buttons` (required) - Action buttons to display (right side of actions row).
- `stats` - Optional stats/configuration section (shown when enabled).
- `info` - Optional informational content rendered between header and actions.