38 lines
1.8 KiB
Plaintext
38 lines
1.8 KiB
Plaintext
<% flash.each do |type, message| %>
|
|
<%
|
|
bg_color = type == "notice" ? "bg-green-50 border-green-200 text-green-800" : "bg-red-50 border-red-200 text-red-800"
|
|
icon_color = type == "notice" ? "text-green-500" : "text-red-500"
|
|
# Die Farbe des Balkens passend zum Typ festlegen
|
|
bar_color = type == "notice" ? "bg-green-500" : "bg-red-500"
|
|
%>
|
|
|
|
<div data-controller="flash" class="fixed top-5 right-5 z-50 max-w-sm w-full">
|
|
|
|
<!-- Das relative Attribut und overflow-hidden sind wichtig für den Balken -->
|
|
<div data-flash-target="notification"
|
|
class="relative overflow-hidden transition-all duration-300 ease-out opacity-100 flex items-start p-4 pb-5 rounded-lg border shadow-lg <%= bg_color %>">
|
|
|
|
<!-- Nachricht -->
|
|
<div class="flex-1 ml-3 text-sm font-medium">
|
|
<%= message %>
|
|
</div>
|
|
|
|
<!-- Schließen-Button -->
|
|
<div class="ml-4 flex shrink-0">
|
|
<button data-action="click->flash#dismiss"
|
|
class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 hover:bg-black/5 <%= icon_color %>">
|
|
<span class="sr-only">Schließen</span>
|
|
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- DER FORTSCHRITTSBALKEN -->
|
|
<!-- 'animate-shrink' ist unsere eigene Animation, die wir gleich definieren -->
|
|
<div class="absolute bottom-0 left-0 h-1 w-full origin-left animate-shrink <%= bar_color %>"></div>
|
|
|
|
</div>
|
|
</div>
|
|
<% end %>
|