mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-25 08:09:38 +02:00
24 lines
1.6 KiB
Text
24 lines
1.6 KiB
Text
|
<%# locals: (type: "success", content:) -%>
|
||
|
|
|
||
|
|
<turbo-stream action="append" target="notification-tray">
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="max-w-80 bg-white shadow-xs border border-alpha-black-50 border-solid py-3 px-4 rounded-[10px] text-sm font-medium flex gap-3 animate-[appear-then-fade_5s_300ms_both]"
|
||
|
|
role="<%= type == "error" ? "alert" : "status" %>"
|
||
|
|
data-controller="element-removal"
|
||
|
|
data-action="click->element-removal#remove animationend->element-removal#remove">
|
||
|
|
<% base_class = "w-5 h-5 p-1 text-white flex shrink-0 items-center justify-center rounded-full" %>
|
||
|
|
<%= type.in?(["error", "alert"]) ? lucide_icon("x", class: "#{base_class} bg-error") : lucide_icon("check", class: "#{base_class} bg-success") %>
|
||
|
|
|
||
|
|
<%= content %>
|
||
|
|
|
||
|
|
<button aria-label="Close notification" data-action="click->element-removal#remove" class="shrink-0 h-5">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
|
||
|
|
<path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
|
||
|
|
<circle class="origin-center -rotate-90 animate-[stroke-fill_5s_300ms_forwards]" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</turbo-stream>
|