SolRengine Starter · solrengine-ui v0.4.0
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div data-controller="sui-modal" class="hidden fixed inset-0 z-50">
  <div data-sui-modal-target="backdrop" data-action="click->sui-modal#backdropClick" class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
  <div class="relative flex items-center justify-center min-h-screen p-4">
    <div data-sui-modal-target="panel" class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-xl w-full max-w-md">
      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-800">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Confirm Transaction</h3>
        <button data-action="click->sui-modal#close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="px-5 py-4">
        <p class='text-gray-600 dark:text-gray-300'>Send 1.5 SOL to 7xKX...AsU?</p>
      </div>
      <div class="px-5 py-3 border-t border-gray-200 dark:border-gray-800 flex justify-end gap-2">
        <button class='px-4 py-2 bg-purple-600 text-white rounded-lg text-sm'>Confirm</button>
      </div>
    </div>
  </div>
</div>
1
2
3
4
render(Solrengine::Ui::ModalComponent.new(title: "Confirm Transaction")) do |c|
  c.with_body { "<p class='text-gray-600 dark:text-gray-300'>Send 1.5 SOL to 7xKX...AsU?</p>".html_safe }
  c.with_actions { "<button class='px-4 py-2 bg-purple-600 text-white rounded-lg text-sm'>Confirm</button>".html_safe }
end

No notes provided.

No params configured.