Last active
May 15, 2024 10:33
-
-
Save MichalMazurek/b48fc51290ce5972b40697f938f31d97 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{#each messages }} | |
<div role="alert" | |
class="animate-duration-200 animate-ease-in animate-fill-both animate-normal animate-flip-down alert | |
{{#if (eq alert_type "info")}}alert-info{{/if}} | |
{{#if (eq alert_type "error" )}}alert-error{{/if}} | |
{{#if (eq alert_type "success")}}alert-success{{/if}} | |
{{#if (eq alert_type "warning" )}}alert-warning{{/if}}" | |
style="margin-bottom: 0.5rem;"> | |
{{#if (eq alert_type "error")}} | |
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
</svg> | |
{{/if}} | |
{{#if (eq alert_type "success")}} | |
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
</svg> | |
{{/if}} | |
{{#if (eq alert_type "warning")}} | |
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> | |
</svg> | |
{{/if}} | |
{{#if (eq alert_type "info")}} | |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
</svg> | |
{{/if}} | |
<span>{{message}}</span> | |
<button class="btn btn-circle btn-xs transition-gpu btn-ghost" _=" | |
on click | |
set :alert to closest parent .alert | |
add .overflow-y-hidden to :alert | |
transition the :alert | |
height to 0 | |
padding-top to 0 | |
padding-bottom to 0 | |
opacity to 0 | |
margin-top to 0 | |
margin-bottom to 0 | |
border-width to 0 | |
transform to `scaleY(0)` | |
over 200ms | |
then settle then remove :alert | |
"> | |
<span class="sr-only">Dismiss</span> | |
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
</svg> | |
</button> | |
</div> | |
{{/each}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment