40 lines
1.6 KiB
PHP
40 lines
1.6 KiB
PHP
{{--Send messages with Session::flash('msg|MESSAGE HERE','success, caution or danger');--}}
|
|
{{--Can also use helper fuction: sendMessage('Test Message','danger')--}}
|
|
@props(['message','messageType'])
|
|
@php
|
|
$div_classes = 'flex justify-between mx-auto max-w-2xl text-sm rounded-md px-3 py-1 mb-2 font-medium ring-1 ring-inset ';
|
|
$button_classes = 'group relative mr-1 h-5 w-5 rounded-sm ';
|
|
$svg_classes = 'h-5 w-5 ';
|
|
switch($messageType) {
|
|
case 'caution':
|
|
$div_classes .= 'bg-yellow-50 text-yellow-800 ring-yellow-600/40';
|
|
$button_classes .= 'hover:bg-yellow-600/20';
|
|
$svg_classes .= 'stroke-yellow-700/50 group-hover:stroke-yellow-700/75';
|
|
break;
|
|
|
|
case 'danger':
|
|
$div_classes .= 'bg-red-50 text-red-700 ring-red-600/40';
|
|
$button_classes .= 'hover:bg-red-600/20';
|
|
$svg_classes .= 'stroke-red-600/50 group-hover:stroke-red-600/75';
|
|
break;
|
|
|
|
default:
|
|
$div_classes .= 'bg-green-50 text-green-700 ring-green-600/40 ';
|
|
$button_classes .= 'hover:bg-green-600/20';
|
|
$svg_classes .= 'stroke-green-700/50 group-hover:stroke-green-700/75';
|
|
break;
|
|
}
|
|
@endphp
|
|
<div class="{{ $div_classes }}" x-data="{ shown: true }" x-show="shown">
|
|
<div>{{ $message }}</div>
|
|
<div>
|
|
<button type="button" class="{{ $button_classes }}" x-on:click=" shown = false">
|
|
<span class="sr-only">Remove</span>
|
|
<svg viewBox="0 0 14 14" class="{{ $svg_classes }}">
|
|
<path d="M4 4l6 6m0-6l-6 6" />
|
|
</svg>
|
|
<span class="absolute -inset-1"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|