modal & slide blur variations

tallstackui · Jun 14, 2024 · 7ff71f0 · 7ff71f0
1 parent dd12fca
commit 7ff71f0
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git a/app/Enums/Examples/Ui/Modal.php b/app/Enums/Examples/Ui/Modal.php
@@ -41,7 +41,9 @@ class Modal
     HTML;
 
     public const BLUR = <<<'HTML'
-    <x-modal title="TallStackUi" blur>
+    <!-- sm, md, lg, xl -->
+    
+    <x-modal title="TallStackUi" blur> <!-- sm blur -->
         TallStackUi
     </x-modal>
     HTML;

diff --git a/app/Enums/Examples/Ui/Slide.php b/app/Enums/Examples/Ui/Slide.php
@@ -47,7 +47,9 @@ class Slide
     HTML;
 
     public const BLUR = <<<'HTML'
-    <x-slide blur>
+    <!-- sm, md, lg, xl -->
+    
+    <x-slide blur> <!-- sm blur -->
         TallStackUi
     </x-slide>
     HTML;

diff --git a/resources/views/documentation/ui/modal.blade.php b/resources/views/documentation/ui/modal.blade.php
@@ -50,11 +50,29 @@
     </x-section>
     <x-section title="Background Blur">
         <x-preview language="blade" :contents="$blur">
-            <x-modal id="blur-modal" title="TallStackUI" blur>
-                TallStackUi
+            <x-modal id="blur-modal-sm" title="TallStackUI" blur>
+                SM
             </x-modal>
-            <x-button x-on:click="$modalOpen('blur-modal')">
-                Open Modal
+            <x-modal id="blur-modal-md" title="TallStackUI" blur="md">
+                MD
+            </x-modal>
+            <x-modal id="blur-modal-lg" title="TallStackUI" blur="lg">
+                LG
+            </x-modal>
+            <x-modal id="blur-modal-xl" title="TallStackUI" blur="xl">
+                XL
+            </x-modal>
+            <x-button x-on:click="$modalOpen('blur-modal-sm')">
+                SM
+            </x-button>
+            <x-button x-on:click="$modalOpen('blur-modal-md')">
+                MD
+            </x-button>
+            <x-button x-on:click="$modalOpen('blur-modal-lg')">
+                LG
+            </x-button>
+            <x-button x-on:click="$modalOpen('blur-modal-xl')">
+                XL
             </x-button>
         </x-preview>
     </x-section>

diff --git a/resources/views/documentation/ui/slide.blade.php b/resources/views/documentation/ui/slide.blade.php
@@ -60,11 +60,29 @@
     </x-section>
     <x-section title="Background Blur">
         <x-preview language="blade" :contents="$blur">
-            <x-slide id="background-blur-slide" blur>
-                TallStackUi
+            <x-slide id="blur-slide-sm" title="TallStackUI" blur>
+                SM
             </x-slide>
-            <x-button x-on:click="$slideOpen('background-blur-slide')">
-                Open Slide
+            <x-slide id="blur-slide-md" title="TallStackUI" blur="md">
+                MD
+            </x-slide>
+            <x-slide id="blur-slide-lg" title="TallStackUI" blur="lg">
+                LG
+            </x-slide>
+            <x-slide id="blur-slide-xl" title="TallStackUI" blur="xl">
+                XL
+            </x-slide>
+            <x-button x-on:click="$slideOpen('blur-slide-sm')">
+                SM
+            </x-button>
+            <x-button x-on:click="$slideOpen('blur-slide-md')">
+                MD
+            </x-button>
+            <x-button x-on:click="$slideOpen('blur-slide-lg')">
+                LG
+            </x-button>
+            <x-button x-on:click="$slideOpen('blur-slide-xl')">
+                XL
             </x-button>
         </x-preview>
     </x-section>