Skip to content

Instantly share code, notes, and snippets.

@extralam

extralam/SimpleBrowserNotification.php

Created October 9, 2021 15:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save extralam/28d1de9232239e291482af699fad9ef3 to your computer and use it in GitHub Desktop.
Save extralam/28d1de9232239e291482af699fad9ef3 to your computer and use it in GitHub Desktop.
Download ZIP
Laravel Livewire - Simple Browser Notification ( toastr like popup )
Raw
layout.blade.php
<html>
<head>
@livewireStyles
</head>
<body>
@livewireScripts
@livewire('simple-browser-notification');
</body>
</html>
Raw
livewire.simple-browser-notification.blade.php
@if(is_null($title))
<div></div>
@else
<div
x-data="{ show: @entangle('isOpen').defer }"
class="fixed z-100 inset-0 flex items-end px-3 py-4 pointer-events-none sm:p-6 sm:items-start">
<div class="w-full flex flex-col items-center space-y-4 sm:items-end">
<div x-show="show"
class="max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
@switch($type)
@case(\App\Http\Livewire\SimpleBrowserNotification::TYPE_ALERT)
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
@break
@case(\App\Http\Livewire\SimpleBrowserNotification::TYPE_INFO)
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<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"/>
</svg>
@break
@default
<svg class="h-6 w-6 text-green-400"
x-description="Heroicon name: outline/check-circle"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<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>
@endswitch
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">
{{ $title ?? '' }}
</p>
<p class="mt-1 text-sm text-gray-500">
{{ $message ?? '' }}
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button @click="show = false"
class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">@lang('admin.close')</span>
<svg class="h-5 w-5" x-description="Heroicon name: solid/x"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<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>
</div>
@endif
Raw
SimpleBrowserNotification.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class SimpleBrowserNotification extends Component
{
public string $title;
public string $message;
public int $type;
public bool $isOpen = true;
public const TYPE_SUCCESS = 0;
public const TYPE_ALERT = 1;
public const TYPE_INFO = 2;
/**
* The component's listeners.
*
* @var array
*/
protected $listeners = [
'sendSimpleBrowserNotification',
];
public function sendSimpleBrowserNotification(array $data) : void
{
$this->title = $data['title'] ?? '';
$this->message = $data['message'] ?? '';
$this->type = $data['type'] ?? 0;
$this->isOpen = true;
}
public function render()
{
return view('livewire.simple-browser-notification');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment