feat: add webpush and sadhna tracker

2026-06-08 15:48:12 +05:30
parent ecb32d2e85
commit 0334e03c3c
52 changed files with 2118 additions and 545 deletions
@@ -0,0 +1,102 @@
+"use client";
+
+/**
+ * RewardCelebration — a full-screen confetti celebration shown when the
+ * devotee earns a streak gift. Centered card with the reward image, its
+ * cosmic name, and symbolic meaning. Dismissing it acknowledges the gift
+ * (via the caller) so it surfaces exactly once.
+ *
+ * Scrolls internally on small screens (max-h + overflow) and reads in both
+ * themes (card/foreground tokens). Esc or backdrop-click closes.
+ */
+
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { Confetti } from "./confetti";
+import type { SadhnaRewardGrant } from "@/lib/sadhna";
+import { useMounted } from "@/lib/use-mounted";
+
+export function RewardCelebration({
+  grant,
+  onClose,
+}: {
+  grant: SadhnaRewardGrant;
+  onClose: () => void;
+}) {
+  const mounted = useMounted();
+
+  // Esc to close + lock background scroll while open.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose]);
+
+  if (!mounted) return null;
+  const r = grant.reward;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <Confetti />
+      <motion.div
+        initial={{ scale: 0.85, opacity: 0, y: 16 }}
+        animate={{ scale: 1, opacity: 1, y: 0 }}
+        transition={{ type: "spring", stiffness: 220, damping: 20 }}
+        className="relative z-10 w-full max-w-md max-h-[90vh] overflow-y-auto rounded-3xl border border-border bg-card p-6 text-center shadow-2xl"
+      >
+        <p className="text-xs font-semibold uppercase tracking-wider text-primary">
+          A gift for your sādhana
+        </p>
+        <h2 className="mt-1 font-(family-name:--font-title) text-2xl font-semibold text-foreground">
+          You&apos;ve earned a reward!
+        </h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          For {grant.milestone} days of unbroken sādhana 🙏
+        </p>
+
+        <div className="relative mx-auto my-6 flex size-48 items-center justify-center">
+          <div className="absolute inset-0 rounded-full bg-primary/15 blur-2xl" />
+          <Image
+            src={r.image_url}
+            alt={r.name}
+            width={256}
+            height={256}
+            sizes="256px"
+            className="relative size-full object-contain drop-shadow-xl"
+          />
+        </div>
+
+        <h3 className="font-(family-name:--font-title) text-xl font-semibold text-foreground">
+          {r.name}
+        </h3>
+        {r.meaning ? (
+          <p className="mx-auto mt-2 max-w-sm text-[15px] leading-relaxed text-muted-foreground">
+            {r.meaning}
+          </p>
+        ) : null}
+
+        <button
+          type="button"
+          onClick={onClose}
+          className="mt-6 inline-flex w-full items-center justify-center rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+        >
+          Hari bol! 🌸
+        </button>
+      </motion.div>
+    </div>,
+    document.body,
+  );
+}