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
<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-lg">
      <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">Select Wallet</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'>Choose a wallet to connect.</p>
      </div>
    </div>
  </div>
</div>
1
2
3
render(Solrengine::Ui::ModalComponent.new(title: "Select Wallet", size: :lg)) do |c|
  c.with_body { "<p class='text-gray-600 dark:text-gray-300'>Choose a wallet to connect.</p>".html_safe }
end

No notes provided.

No params configured.