Improve Notice Component

app/View/Components/Utils/Notice.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Components\Utils;
+
+use Illuminate\Container\Attributes\Config;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Notice extends Component
+{
+    private array $positions = [
+        'bottom-right' => 'flex-col-reverse',
+        'top-right' => 'flex-col',
+    ];
+
+    public string $position;
+
+    public function __construct(
+        #[Config('utils.notice.position')] string $position,
+        #[Config('utils.notice.auto_close')] public bool $autoClose,
+        #[Config('utils.notice.time_close')] public int $timeClose,
+    ) {
+        $this->position = $this->positions[$position];
+    }
+
+    public function render(): View
+    {
+        return view('components.utils.notice');
+    }
+}

config/utils.php

@@ -0,0 +1,9 @@
+<?php
+
+return [
+    'notice' => [
+        'position' => 'top-right',
+        'auto_close' => true,
+        'time_close' => 5000, // ms
+    ],
+];

resources/views/components/utils/notice.blade.php

@@ -2,7 +2,10 @@
 <div>
 	<div
 		x-data="noticesHandler()"
-		class="fixed right-0 left-auto inset-0 flex flex-col-reverse items-end justify-start p-4 space-y-4 h-screen w-0"
+		@class([
+			'fixed right-0 left-auto inset-0 flex items-end justify-start p-4 space-y-4 h-screen w-0',
+			$position,
+		])
 		@notice.window="add($event.detail)"
 		style="pointer-events:none">
 		<template x-for="notice of notices" :key="notice.id">
@@ -39,6 +42,9 @@ class="max-wxs min-w-80 text-sm text-white rounded-xl shadow-lg" role="alert" ta
 
 @push('javascript')
 	<script>
+		const autoClose = {{ $autoClose ? 'true' : 'false' }} ;
+		const timeClose = {{ $timeClose }};
+
 		function noticesHandler() {
 			return {
 				notices: [],
@@ -50,7 +56,10 @@ function noticesHandler() {
 				},
 				fire(id) {
 					this.visible.push(this.notices.find(notice => notice.id === id));
-					const timeShown = 5000 * this.visible.length;
+
+					if (! autoClose) return;
+
+					const timeShown = timeClose * this.visible.length;
 					setTimeout(() => {
 						this.remove(id)
 					}, timeShown);