feat: modal component bs5

Author: athphane

resources/views/bootstrap-5/modal.blade.php

@@ -0,0 +1,21 @@
+<div class="modal" tabindex="-1" id="{{ $attributes->get('id') ?: $id() }}">
+    <div class="modal-dialog {{ $modalSizeClass ?? 'modal-lg' }}">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    {{ $title ?? '' }}
+                </h5>
+
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+
+            <div class="modal-body">
+                {{ $slot }}
+            </div>
+
+            <div class="modal-footer">
+                {{ $footer ?? '' }}
+            </div>
+        </div>
+    </div>
+</div>

src/Views/Components/Modal.php

@@ -7,18 +7,23 @@ class Modal extends Component
     protected string $view = 'modal';
 
     public string $title;
+    public ?string $modalSizeClass = null;
 
     /**
      * Create a new component instance.
      *
      * @return void
      */
     public function __construct(
+        string $id = '',
         string $title = '',
+        string $modalSizeClass = null,
         string $framework = ''
     ) {
         parent::__construct($framework);
 
+        $this->id = $id;
         $this->title = $title;
+        $this->modalSizeClass = $modalSizeClass;
     }
 }