-
-
Save fideloper/542608f327ee30043aeb35f0b04ab60f 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
<div | |
x-data="{ | |
messages: [], | |
remove(message) { | |
this.messages.splice(this.messages.indexOf(message), 1) | |
}, | |
}" | |
@notify.window="let message = $event.detail; messages.push(message); setTimeout(() => { remove(message) }, 2500)" | |
class="z-50 fixed inset-0 flex flex-col items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:justify-start space-y-4" | |
> | |
<template x-for="(message, messageIndex) in messages" :key="messageIndex" hidden> | |
<div | |
x-data="{ show: false }" | |
x-init="$nextTick(() => { show = true })" | |
x-show="show" | |
x-transition:enter="transform ease-out duration-300 transition" | |
x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" | |
x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0" | |
x-transition:leave="transition ease-in duration-100" | |
x-transition:leave-start="opacity-100" | |
x-transition:leave-end="opacity-0" | |
class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto" | |
> | |
<div class="rounded-lg shadow-lg overflow-hidden"> | |
<div class="p-4"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0"> | |
<svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
<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"></path> | |
</svg> | |
</div> | |
<div class="ml-3 w-0 flex-1 pt-0.5"> | |
<p x-text="message" class="text-sm leading-5 font-medium text-gray-900"></p> | |
</div> | |
<div class="ml-4 flex-shrink-0 flex"> | |
<button @click="remove(message)" class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"> | |
<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"></path> | |
</svg> | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</template> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment