fix(ui): fix notification center slot render

matschik · Oct 6, 2024 · fcb297d · fcb297d
1 parent b226ab3
commit fcb297d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 33 deletions.
diff --git a/src/components/AppNotificationCenter.svelte b/src/components/AppNotificationCenter.svelte
@@ -3,37 +3,38 @@
   import TransitionWithClass from "./TransitionWithClass.svelte";
 </script>
 
-<NotificationCenter zIndex={100} let:notification>
-  {@const { title } = notification}
-  <TransitionWithClass
-    class="pointer-events-auto overflow-hidden rounded-lg bg-[#181622] border border-[#33323e] shadow-lg ring-1 ring-black ring-opacity-5"
-    enter="transform ease-out duration-200 transition"
-    enterFrom="translate-y-2 opacity-0 translate-y-0 translate-x-2"
-    enterTo="translate-y-0 opacity-100 translate-x-0"
-    leave="transition ease-in duration-100"
-    leaveFrom="opacity-100"
-    leaveTo="opacity-0"
-  >
-    <div class="p-4">
-      <div class="flex items-start">
-        <div class="flex-shrink-0">
-          <div class="i-heroicons:check-circle size-6 text-green-400"></div>
-        </div>
-        <div class="ml-3 w-0 flex-1 pt-0.5">
-          <p class="text-sm font-medium">
-            {title}
-          </p>
-        </div>
-        <div class="ml-4 flex flex-shrink-0">
-          <button
-            class="inline-flex rounded-md bg-transparent focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-            onclick={() => notification.close()}
-          >
-            <span class="sr-only">Close</span>
-            <div class="i-heroicons:x-mark size-5"></div>
-          </button>
+<NotificationCenter zIndex={100}>
+  {#snippet notificationContainer({ title, close })}
+    <TransitionWithClass
+      class="pointer-events-auto overflow-hidden rounded-lg bg-[#181622] border border-[#33323e] shadow-lg ring-1 ring-black ring-opacity-5"
+      enter="transform ease-out duration-200 transition"
+      enterFrom="translate-y-2 opacity-0 translate-y-0 translate-x-2"
+      enterTo="translate-y-0 opacity-100 translate-x-0"
+      leave="transition ease-in duration-100"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="flex-shrink-0">
+            <div class="i-heroicons:check-circle size-6 text-green-400"></div>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <p class="text-sm font-medium">
+              {title}
+            </p>
+          </div>
+          <div class="ml-4 flex flex-shrink-0">
+            <button
+              class="inline-flex rounded-md bg-transparent focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              onclick={close}
+            >
+              <span class="sr-only">Close</span>
+              <div class="i-heroicons:x-mark size-5"></div>
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-  </TransitionWithClass>
+    </TransitionWithClass>
+  {/snippet}
 </NotificationCenter>
diff --git a/src/components/NotificationCenter.svelte b/src/components/NotificationCenter.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <script>
-  let { zIndex = 20, children } = $props();
+  let { zIndex = 20, notificationContainer } = $props();
 
   function dismissAfter(_, notification) {
     notification.dismissAfter &&
@@ -50,7 +50,7 @@
   <ul class="notifications-list space-y-4">
     {#each $notifications as notification (notification)}
       <li use:dismissAfter={notification}>
-        {@render children()}
+        {@render notificationContainer(notification)}
       </li>
     {/each}
   </ul>