105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
"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 select-none"
|
|
>
|
|
<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've earned a reward!
|
|
</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{grant.milestone !== null
|
|
? `For ${grant.milestone} days of unbroken sādhana 🙏`
|
|
: "A gift for you 🙏"}
|
|
</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,
|
|
);
|
|
}
|