Skip to content

Instantly share code, notes, and snippets.

@JustSteveKing
Last active May 23, 2024 15:32
Show Gist options
  • Save JustSteveKing/ab24c8257fa45e9cf9259a3cff11b525 to your computer and use it in GitHub Desktop.
Save JustSteveKing/ab24c8257fa45e9cf9259a3cff11b525 to your computer and use it in GitHub Desktop.
Simple Livewire and Tailwind notifications
<div>
@if ($loaded)
<div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto">
<div class="rounded-lg shadow-xs overflow-hidden">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
@if ($type === 'success')
<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"/>
</svg>
@elseif ($type === 'warning')
<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="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"></path>
</svg>
@elseif ($type === 'info')
<svg class="h-6 w-6 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
</svg>
@elseif ($type === 'error')
<svg class="h-6 w-6 text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
@endif
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm leading-5 font-medium text-gray-900">
{{ $title }}
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button wire:click="hide" 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"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Notification extends Component
{
public $loaded = false;
public $title = 'Default notification message';
public $type = 'success';
protected $listeners = [
'notify' => 'renderNotification'
];
public function render()
{
return view('livewire.notification');
}
public function hide()
{
$this->title = '';
$this->loaded = false;
}
public function renderNotification(string $title, string $type = 'success')
{
$this->title = $title;
$this->type = $type;
$this->loaded = true;
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
class OtherComponent extends Component
{
public function doSomething()
{
/** Do some logic around your components action **/
// send over notification level: success|info|warning|error
$this->emit('notify', 'Notification title', 'level');
}
public function render()
{
return view('livewire.other-component');
}
}
<livewire:notification />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment