Add cookie notice transition

grammyjs · Apr 10, 2024 · 087c22b · 087c22b
1 parent 421a39d
commit 087c22b
Showing 1 changed file with 22 additions and 15 deletions.
diff --git a/islands/CookieNotice.tsx b/islands/CookieNotice.tsx
@@ -1,5 +1,7 @@
 import { IS_BROWSER } from "$fresh/runtime.ts";
+import { useComputed } from "@preact/signals";
 
+import { Presence } from "../components/Presence.tsx";
 import { storedBoolean } from "../lib/stored_signals.tsx";
 
 const hide = storedBoolean(false, "hide-cookie-notice");
@@ -8,23 +10,28 @@ export function CookieNotice() {
   if (!IS_BROWSER) {
     return null;
   }
-  if (hide.value) {
-    return null;
-  }
   return (
-    <div class="bg-foreground-transparent fixed bottom-0 left-0 backdrop-blur-2xl w-full p-5">
-      <div class="max-w-[900px] w-full mx-auto gap-5 text-sm flex flex-col justify-center sm:(flex-row items-center justify-between)">
-        <div>
-          We make use of cookies to collect anonymous usage statistics that help
-          us improve the project.
+    <Presence present={useComputed(() => !hide.value)}>
+      <div
+        class={`bg-foreground-transparent fixed bottom-0 left-0 backdrop-blur-2xl w-full p-5 ${
+          hide.value
+            ? "animate-out-opacity pointer-events-none"
+            : "animate-in-opacity pointer-events-auto"
+        }`}
+      >
+        <div class="max-w-[900px] w-full mx-auto gap-5 text-sm flex flex-col justify-center sm:(flex-row items-center justify-between)">
+          <div>
+            We make use of cookies to collect anonymous usage statistics that
+            help us improve the project.
+          </div>
+          <button
+            onClick={() => hide.value = true}
+            class="text-grammy self-end xl:self-auto"
+          >
+            OK
+          </button>
         </div>
-        <button
-          onClick={() => hide.value = true}
-          class="text-grammy self-end xl:self-auto"
-        >
-          OK
-        </button>
       </div>
-    </div>
+    </Presence>
   );
 }