alert components typo

app/View/Components/Alert.php

@@ -18,12 +18,18 @@ class Alert extends Component
     /** @var string */
     public $icon;
 
+    /** @var string */
+    public $typr;
+
     /** @var string */
     public $title;
 
     /** @var string */
     public $description;
 
+    /** @var string */
+    public $message;
+
     /** @var array */
     public $list;
 
@@ -43,19 +49,25 @@ class Alert extends Component
         
         string $color = '', string $icon = '',
 
-        string $title = '', string $description = '',
+        string $type = '',
+        
+        string $title = '', string $description = '', string $message = '',
         array $list = [], array $actions = [],
         bool $dismiss = false
     ) {
         $this->rounded = $rounded;
         $this->border = $border;
 
+        $this->type = $type;
+
         $this->color = $this->getColor($color);
         $this->icon = $this->getIcon($icon);
 
         $this->title = $title;
         $this->description = $description;
 
+        $this->message = $message;
+
         $this->list = $list;
         $this->actions = $actions;
 
@@ -78,7 +90,24 @@ class Alert extends Component
             return $color;
         }
 
-        $color = 'green';
+        switch ($this->type) {
+            case 'success':
+                $color = 'green';
+                break;
+            case 'info':
+                $color = 'blue';
+                break;
+            case 'warning':
+                $color = 'orange';
+                break;
+            case 'danger':
+            case 'error':
+                $color = 'red';
+                break;
+            default:
+                $color = 'green';
+                break;
+        }
 
         return $color;
     }
@@ -89,7 +118,24 @@ class Alert extends Component
             return $icon;
         }
 
-        $icon = 'check_circle';
+        switch ($this->type) {
+            case 'success':
+                $icon = 'check_circle';
+                break;
+            case 'info':
+                $icon = 'info';
+                break;
+            case 'warning':
+                $icon = 'warning';
+                break;
+            case 'danger':
+            case 'error':
+                $icon = 'error';
+                break;
+            default:
+                $icon = 'check_circle';
+                break;
+        }
 
         return $icon;
     }

resources/views/components/alert/border.blade.php

@@ -7,6 +7,7 @@
 
     :title="$title"
     :description="$description"
+    :message="$message"
     :list="$list"
 
     :actions="$actions"

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

@@ -4,6 +4,7 @@
 
     :title="$title"
     :description="$description"
+    :message="$message"
     :list="$list"
 
     :rounded="$rounded"

resources/views/components/alert/index.blade.php

@@ -2,8 +2,9 @@
     @class([
         'rounded-md' => $rounded,
         'border-l-4 border-' . $color . '-400' => $border,
-        'bg-' . $color . '-50',
+        'bg-' . $color . '-50' => $color != 'green',
-        'p-4',
+        'bg-' . $color . '-100' => $color == 'green',
+        'p-4 my-4',
     ])
     x-data
 >
@@ -13,21 +14,31 @@
         </div>
 
         <div class="ml-3">
-            <h3 class="text-sm font-medium text-{{ $color }}-800">
+            @if ($title)
-                {{ $title }}
+                <h3 class="text-sm font-medium text-{{ $color }}-800">
-            </h3>
+                    {!! $title !!}
+                </h3>
+            @endif
 
-            <div class="mt-2 text-sm text-{{ $color }}-700">
+            @if ($description || $list)
-                <p>{{ $description }}</p>
+                <div class="mt-2 text-sm text-{{ $color }}-700">
+                    <p>{!! $description !!}</p>
 
-                @if ($list)
+                    @if ($list)
-                    <ul role="list" class="list-disc space-y-1 pl-5">
+                        <ul role="list" class="list-disc space-y-1 pl-5">
-                        @foreach ($list as $message)
+                            @foreach ($list as $message)
-                            <li>{{ $message }}</li>
+                                <li>{!! $message !!}</li>
-                        @endforeach
+                            @endforeach
-                    </ul>
+                        </ul>
-                @endif
+                    @endif
-            </div>
+                </div>
+            @endif
+
+            @if ($message)
+                <p class="text-sm font-medium text-{{ $color }}-800 inline-block align-middle">
+                    {!! $message !!}
+                </p>
+            @endif
 
             @if ($actions) 
                 <div class="mt-4">
@@ -83,7 +94,8 @@
                         @class([
                             'inline-flex',
                             'rounded-md',
-                            'bg-' . $color . '-50',
+                            'bg-' . $color . '-50' => $color != 'green',
+                            'bg-' . $color . '-100' => $color == 'green',
                             'p-1.5',
                             'text-sm font-medium',
                             'text-' . $color . '-500 hover:bg-' . $color . '-100',

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

@@ -4,6 +4,7 @@
 
     :title="$title"
     :description="$description"
+    :message="$message"
     :list="$list"
 
     :rounded="$rounded"

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

@@ -4,6 +4,7 @@
 
     :title="$title"
     :description="$description"
+    :message="$message"
     :list="$list"
 
     :rounded="$rounded"

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

@@ -4,6 +4,7 @@
 
     :title="$title"
     :description="$description"
+    :message="$message"
     :list="$list"
 
     :rounded="$rounded"