livebook/lib/livebook_web/templates/layout/live.html.heex

<main role="main" class="grow flex flex-col h-screen">
  <div class="fixed right-8 top-5 z-[1000] flex flex-col space-y-3">
    <%= if live_flash(@flash, :info) do %>
      <div
        class="shadow-custom-1 max-w-2xl flex items-center space-x-3 rounded-lg px-4 py-2 border-l-4 rounded-l-none border-blue-500 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-500 cursor-pointer"
        role="alert"
        phx-click="lv:clear-flash"
        phx-value-key="info"
      >
        <.remix_icon icon="information-line" class="text-2xl text-blue-500" />
        <span
          class="whitespace-pre-wrap pr-2 max-h-52 overflow-y-auto tiny-scrollbar"
          phx-no-format
        ><%= live_flash(@flash, :info) %></span>
      </div>
    <% end %>

    <%= if live_flash(@flash, :success) do %>
      <div
        class="shadow-custom-1 max-w-2xl flex items-center space-x-3 rounded-lg pl-4 pr-2 py-2 border-l-4 rounded-l-none border-blue-500 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-500 cursor-pointer"
        role="alert"
        phx-click="lv:clear-flash"
        phx-value-key="success"
      >
        <.remix_icon icon="checkbox-circle-fill" class="text-2xl text-blue-500" />
        <span
          class="whitespace-pre-wrap pr-2 max-h-52 overflow-y-auto tiny-scrollbar"
          phx-no-format
        ><%= live_flash(@flash, :success) %></span>
      </div>
    <% end %>

    <%= if live_flash(@flash, :warning) do %>
      <div
        class="shadow-custom-1 max-w-2xl flex items-center space-x-3 rounded-lg px-4 py-2 border-l-4 rounded-l-none border-yellow-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-500 cursor-pointer"
        role="alert"
        phx-click="lv:clear-flash"
        phx-value-key="warning"
      >
        <.remix_icon icon="alert-line" class="text-2xl text-yellow-400" />
        <span
          class="whitespace-pre-wrap pr-2 max-h-52 overflow-y-auto tiny-scrollbar"
          phx-no-format
        ><%= live_flash(@flash, :warning) %></span>
      </div>
    <% end %>

    <%= if live_flash(@flash, :error) do %>
      <div
        class="shadow-custom-1 max-w-2xl flex items-center space-x-3 rounded-lg px-4 py-2 border-l-4 rounded-l-none border-red-500 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-500 cursor-pointer"
        role="alert"
        phx-click="lv:clear-flash"
        phx-value-key="error"
      >
        <.remix_icon icon="close-circle-line" class="text-2xl text-red-500" />
        <span
          class="whitespace-pre-wrap pr-2 max-h-52 overflow-y-auto tiny-scrollbar"
          phx-no-format
        ><%= live_flash(@flash, :error) %></span>
      </div>
    <% end %>
  </div>

  <%= @inner_content %>
</main>

<.confirm_modal />