Module: Protege::Components::CardsHelper

Included in:
ComponentsHelper
Defined in:
app/helpers/protege/components/cards_helper.rb

Overview

Surface-card UI elements shared across engine views. One helper among the Components peers pulled together by ComponentsHelper; info_card calls heading_2 (+TypographyHelper+), resolved through the view, which has every helper.

Colors use CSS custom properties (--surface, --border, --text-faint) defined in tailwind/application.css so dark mode works via a single .dark class toggle.

Instance Method Summary collapse

Instance Method Details

#card(padding: true) { ... } ⇒ ActiveSupport::SafeBuffer

Render a surface card, padded unless padding is false.

Parameters:

  • padding (Boolean) (defaults to: true) —

    whether to apply interior padding

Yields:

  • the card body content

Returns:

  • (ActiveSupport::SafeBuffer) —

    the card markup



17
18
19
20
 
# File 'app/helpers/protege/components/cards_helper.rb', line 17

def card(padding: true, &)
  tag.div(class: "rounded-xl #{'p-6' if padding}",
          style: 'background: var(--surface); border: 1px solid var(--border)', &)
end

#info_card(title, pairs = {}, full_width: false) ⇒ ActiveSupport::SafeBuffer

Render a titled card of label/value pairs in a monospace value column.

By default the label sits in a fixed-width column beside the value — right for short labels like "Address". Pass full_width: true to let the label take its natural width so the value uses the full row, for longer labels (e.g. resolver class names) that would overflow the fixed column.

Parameters:

  • title (String) —

    the card title

  • pairs (Hash{String => String}) (defaults to: {}) —

    the label => value rows

  • full_width (Boolean) (defaults to: false) —

    let the label size to its content instead of a fixed column

Returns:

  • (ActiveSupport::SafeBuffer) —

    the info-card markup



32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
# File 'app/helpers/protege/components/cards_helper.rb', line 32

def info_card(title, pairs = {}, full_width: false)
  tag.div(class: 'rounded-xl p-5',
          style: 'background: var(--surface); border: 1px solid var(--border)') do
    tag.div(class: 'mb-3') { heading_2(title) } +
      tag.div(class: 'space-y-1 text-sm') do
        safe_join(pairs.map do |label, value|
          tag.div(class: 'flex gap-8') do
            tag.span(label, class: (full_width ? 'shrink-0' : 'w-20'), style: 'color: var(--text-faint)') +
              tag.code(value, class: 'font-mono break-all')
          end
        end)
      end
  end
end