feat: open and close modal

resources/css/app.css

@@ -16,3 +16,10 @@
     @apply outline-1;
   }
 }
+
+@layer utilities {
+  /* this is used by alpine.js to properly hide elements on load */
+  [x-cloak] {
+    @apply hidden;
+  }
+}

resources/views/components/modal/base.blade.php

@@ -1,4 +1,42 @@
-<div class="modal fixed inset-0 flex justify-center overflow-y-scroll">
-    <div class="absolute inset-0 bg-slate-800/80 backdrop-blur-sm"></div>
+@props([
+    'name',
+    'show' => false,
+])
+
+<div
+    x-data="{
+        show: @js($show),
+    }"
+    x-show="show"
+    x-on:open-modal.window="
+        if ($event.detail === '{{ $name }}') {
+            show = true
+        }
+    "
+    x-on:close-modal.window="
+        if ($event.detail === '{{ $name }}') {
+            show = false
+        }
+    "
+    x-init="
+        $watch('show', (show) => {
+            if (show) {
+                document.body.classList.add('overflow-hidden')
+            } else {
+                document.body.classList.remove('overflow-hidden')
+            }
+        })
+    "
+    x-cloak
+    @class([
+        'flex' => $show,
+        'hidden' => "$show",
+        'fixed inset-0 flex justify-center overflow-y-scroll',
+    ])
+>
+    <div
+        @click="show = false"
+        class="absolute inset-0 bg-slate-800/80 backdrop-blur-sm"
+    ></div>
     {{ $slot }}
 </div>

resources/views/home.blade.php

@@ -16,4 +16,70 @@ class="w-40"
             class="w-40"
         />
     </div>
+    <div class="flex gap-4">
+        <x-movie
+            title="The Worst Person in The World"
+            rating="7.6"
+            image="https://m.media-amazon.com/images/M/MV5BZGEyYzBiYmItZDM4OC00NTdmLWJlYzctODdiM2E2MjZmYTU2XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg"
+            link=""
+            class="w-40"
+        />
+        <x-movie
+            title="The Worst Person in The World hello here is some more text to see how it looks"
+            rating="7.6"
+            image="https://m.media-amazon.com/images/M/MV5BZGEyYzBiYmItZDM4OC00NTdmLWJlYzctODdiM2E2MjZmYTU2XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg"
+            link=""
+            class="w-40"
+        />
+    </div>
+    <div class="flex gap-4">
+        <x-movie
+            title="The Worst Person in The World"
+            rating="7.6"
+            image="https://m.media-amazon.com/images/M/MV5BZGEyYzBiYmItZDM4OC00NTdmLWJlYzctODdiM2E2MjZmYTU2XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg"
+            link=""
+            class="w-40"
+        />
+        <x-movie
+            title="The Worst Person in The World hello here is some more text to see how it looks"
+            rating="7.6"
+            image="https://m.media-amazon.com/images/M/MV5BZGEyYzBiYmItZDM4OC00NTdmLWJlYzctODdiM2E2MjZmYTU2XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg"
+            link=""
+            class="w-40"
+        />
+    </div>
+    <div class="flex gap-4">
+        <x-movie
+            title="The Worst Person in The World"
+            rating="7.6"
+            image="https://m.media-amazon.com/images/M/MV5BZGEyYzBiYmItZDM4OC00NTdmLWJlYzctODdiM2E2MjZmYTU2XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg"
+            link=""
+            class="w-40"
+        />
+        <x-movie
+            title="The Worst Person in The World hello here is some more text to see how it looks"
+            rating="7.6"
+            image="https://m.media-amazon.com/images/M/MV5BZGEyYzBiYmItZDM4OC00NTdmLWJlYzctODdiM2E2MjZmYTU2XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg"
+            link=""
+            class="w-40"
+        />
+    </div>
+
+    <x-button x-data @click="$dispatch('open-modal', 'test-modal')">
+        open modal
+    </x-button>
+
+    <x-modal.base name="test-modal">
+        <x-modal.menu>
+            <x-slot:title>egf</x-slot>
+
+            <p>fake menu item</p>
+            <p>fake menu item</p>
+            <p>fake menu item</p>
+
+            <x-button x-data @click="$dispatch('close-modal', 'test-modal')">
+                cancel
+            </x-button>
+        </x-modal.menu>
+    </x-modal.base>
 </x-layout>