From c86262ab024b0b68b25d0f4315ad8f295ec5f36c Mon Sep 17 00:00:00 2001
From: BuildTools <unconfigured@null.spigotmc.org>
Date: Wed, 7 Feb 2024 19:52:39 +0100
Subject: [PATCH] Dialog-Komponente erstellt

---
 CocktailWeb/Pages/ModalComponent.razor | 51 ++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 CocktailWeb/Pages/ModalComponent.razor

diff --git a/CocktailWeb/Pages/ModalComponent.razor b/CocktailWeb/Pages/ModalComponent.razor
new file mode 100644
index 0000000..57a1d43
--- /dev/null
+++ b/CocktailWeb/Pages/ModalComponent.razor
@@ -0,0 +1,51 @@
+<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
+    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">@Title</h5>
+            </div>
+            <div class="modal-body">
+                @Body
+            </div>
+            <div class="modal-footer">
+                @Footer
+            </div>
+        </div>
+    </div>
+</div>
+
+@if (showBackdrop)
+{
+    <div class="modal-backdrop fade show"></div>
+}
+
+@code {
+    [Parameter]
+    public RenderFragment? Title { get; set; }
+
+    [Parameter]
+    public RenderFragment? Body { get; set; }
+
+    [Parameter]
+    public RenderFragment? Footer { get; set; }
+
+    private string modalDisplay = "none;";
+    private string modalClass = "";
+    private bool showBackdrop = false;
+
+    public async Task OpenModal()
+    {
+        modalDisplay = "block;";
+        await Task.Delay(100);//Delay allows bootstrap to perform nice fade animation
+        modalClass = "show";
+        showBackdrop = true;
+    }
+
+    public async Task Close()
+    {
+        modalDisplay = "none";
+        await Task.Delay(250);//Delay allows bootstrap to perform nice fade animation
+        modalClass = "";
+        showBackdrop = false;
+    }
+}
\ No newline at end of file