改进 Alert

app/View/Components/Alert.php

@@ -7,16 +7,6 @@
 
 class Alert extends Component
 {
-    /**
-     * Create a new component instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        //
-    }
-
     /**
      * Get the view / contents that represent the component.
      *

app/View/Components/AlertDanger.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AlertDanger extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View|Closure|string
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.alert-danger');
+    }
+}

app/View/Components/AlertInfo.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AlertInfo extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View|Closure|string
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.alert-info');
+    }
+}

app/View/Components/AlertSuccess.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AlertSuccess extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View|Closure|string
+     */
+    public function render(): View|string|Closure
+    {
+        return view('components.alert-success');
+    }
+}

app/View/Components/AlertWarning.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AlertWarning extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View|Closure|string
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.alert-warning');
+    }
+}

resources/views/components/alert-danger.blade.php

@@ -0,0 +1,11 @@
+<div>
+    <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
+        <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
+            <use xlink:href="#exclamation-triangle-fill"/>
+        </svg>
+        <div>
+            {{ $slot }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+</div>

resources/views/components/alert-info.blade.php

@@ -0,0 +1,11 @@
+<div>
+    <div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
+        <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
+            <use xlink:href="#info-fill"/>
+        </svg>
+        <div>
+            {{ $slot }}
+        </div>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+</div>

resources/views/components/alert-success.blade.php

@@ -0,0 +1,11 @@
+<div>
+    <div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
+        <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
+            <use xlink:href="#check-circle-fill"/>
+        </svg>
+        <div>
+            {{ $slot }}
+        </div>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+</div>

resources/views/components/alert-warning.blade.php

@@ -0,0 +1,3 @@
+<div>
+    <!-- Because you are alive, everything is possible. - Thich Nhat Hanh -->
+</div>

resources/views/components/alert.blade.php

@@ -14,63 +14,29 @@
         </symbol>
     </svg>
     @if (session('error'))
-        <div>
+        <x-alert-danger>
-            <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
+            {{ session('error') }}
-                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
+        </x-alert-danger>
-                    <use xlink:href="#exclamation-triangle-fill"/>
-                </svg>
-                <div>
-                    {{ session('error') }}
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                </div>
-            </div>
-        </div>
     @endif
     @if (session('status'))
-        <div>
+        <x-alert-info>
-            <div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
+            {{ session('status') }}
-                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
+        </x-alert-info>
-                    <use xlink:href="#info-fill"/>
-                </svg>
-                <div>
-                    {{ session('status') }}
-                </div>
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-            </div>
-        </div>
     @endif
 
     @if (session('success'))
-        <div>
+        <x-alert-success>
-            <div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
+            {{ session('success') }}
-                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
+        </x-alert-success>
-                    <use xlink:href="#check-circle-fill"/>
-                </svg>
-                <div>
-                    {{ session('success') }}
-
-                </div>
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-            </div>
-        </div>
     @endif
     @if (isset($errors) && $errors->any())
-        <div>
+        <x-alert-danger>
-            <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
+            <ul class="mb-0">
-                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
+                @foreach ($errors->all() as $error)
-                    <use xlink:href="#exclamation-triangle-fill"/>
+                    <li>{{ $error }}</li>
-                </svg>
+                @endforeach
-                <div>
+            </ul>
-                    <ul class="mb-0">
+        </x-alert-danger>
-                        @foreach ($errors->all() as $error)
-                            <li>{{ $error }}</li>
-                        @endforeach
-                    </ul>
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                </div>
-            </div>
-        </div>
-
     @endif
 
 </div>