Alerts

<div class="space-y-10 h-40 w-full max-w-xl flex flex-col items-center">
    <div class="flex space-x-10 mx-auto">
        <x-lb.element.button.primary wire:click="success">
            Success
        </x-lb.element.button.primary>
        <x-lb.element.button.danger wire:click="error">
            Error
        </x-lb.element.button.danger>
    </div>
 
    <div class="w-full">
        <x-lb.element.alert.for-event-success-and-error />
    </div>
</div>

<?php
 
namespace App\Http\Livewire\Elements\Alert;
 
use Livewire\Component;
 
class ForEventSuccessAndErrorDemo extends Component
{
 
    public function success()
    {
        $this->emitSelf('success', ['Database updated successfully - The force is strong with you!']);
    }
 
 
    public function error()
    {
        $this->emitSelf('error', ['Oops! The server tripped over a misplaced semicolon.']);
    }
 
 
    public function render()
    {
        return view('livewire.elements.alert.for-event-success-and-error-demo');
    }
}

<div x-data="{ shown: false, message: 'Default Message', messageType: '', timeout: null }" x-show="shown" x-init="@this.on('success', (data) => {
    messageType = 'success';
    shown = true;
    message = data;
    clearTimeout(timeout);
    timeout = setTimeout(() => { shown = false; }, 3000);
});
@this.on('error', (data) => {
    messageType = 'error';
    shown = true;
    message = data;
    clearTimeout(timeout);
    timeout = setTimeout(() => { shown = false; }, 10000);
});" style="display:none"
    x-show.transition.out.opacity.duration.1500ms="shown" x-transition:leave.opacity.duration.500
    x-transition:enter.opacity.duration.500>
 
    <div x-show="messageType === 'success'" class="rounded-md bg-green-50 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p x-text="message" class="text-sm font-medium text-green-800"></p>
            </div>
            <div class="ml-auto pl-3">
                <div class="-mx-1.5 -my-1.5">
                    <button type="button" @click="shown = false"
                        class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50">
                        <span class="sr-only">Dismiss</span>
                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path
                                d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
 
    <div x-show="messageType === 'error'" class="rounded-md bg-red-50 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p x-text="message" class="text-sm font-medium text-red-800"></p>
            </div>
            <div class="ml-auto pl-3">
                <div class="-mx-1.5 -my-1.5">
                    <button type="button" @click="shown = false"
                        class="inline-flex rounded-md bg-red-50 p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 focus:ring-offset-red-50">
                        <span class="sr-only">Dismiss</span>
                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path
                                d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>