feat: add webpush and sadhna tracker
This commit is contained in:
gosangam
@@ -0,0 +1,177 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* RewardsGallery — the collected-gifts section on /sadhna-streak. Shows each
|
||||
* unique reward the devotee has earned as a tappable tile (image + short
|
||||
* name); tapping opens a detail dialog with the full name + symbolic
|
||||
* meaning + which streak day it was earned. Remaining catalog slots show as
|
||||
* locked tiles to entice completion.
|
||||
*
|
||||
* Built to read in both themes (card/foreground tokens), keep names legible
|
||||
* (line-clamped, never overflowing), and resize the large R2 images via
|
||||
* next/image.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import Image from "next/image";
|
||||
import { Gift } from "lucide-react";
|
||||
import type { SadhnaRewardGrant } from "@/lib/sadhna";
|
||||
import { useMounted } from "@/lib/use-mounted";
|
||||
|
||||
export function RewardsGallery({
|
||||
collected,
|
||||
nextRewardDate,
|
||||
}: {
|
||||
collected: SadhnaRewardGrant[];
|
||||
nextRewardDate: string | null;
|
||||
}) {
|
||||
const [detail, setDetail] = useState<SadhnaRewardGrant | null>(null);
|
||||
|
||||
// De-dupe by reward (collected is newest-first, so the first wins).
|
||||
const seen = new Set<string>();
|
||||
const unique: SadhnaRewardGrant[] = [];
|
||||
for (const g of collected) {
|
||||
if (!seen.has(g.reward.key)) {
|
||||
seen.add(g.reward.key);
|
||||
unique.push(g);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="rounded-2xl border border-border bg-card p-4 sm:p-5">
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<Gift className="size-5 text-primary" />
|
||||
<h2 className="text-base font-semibold text-foreground">
|
||||
Sacred Rewards
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{unique.length === 0 ? (
|
||||
<div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border bg-muted/20 px-4 py-8 text-center">
|
||||
<Gift className="size-8 text-muted-foreground/50" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No gifts yet. Keep your sādhana streak — a sacred reward arrives
|
||||
every 7 days.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-2.5 sm:grid-cols-4">
|
||||
{unique.map((g) => (
|
||||
<button
|
||||
key={g.reward.key}
|
||||
type="button"
|
||||
onClick={() => setDetail(g)}
|
||||
className="group flex flex-col items-center gap-1.5 rounded-xl border border-border bg-background p-2 text-center transition-colors hover:border-primary/40 hover:bg-muted/40"
|
||||
>
|
||||
<div className="relative aspect-square w-full">
|
||||
<Image
|
||||
src={g.reward.image_url}
|
||||
alt={g.reward.name}
|
||||
fill
|
||||
sizes="(max-width: 640px) 30vw, 120px"
|
||||
className="object-contain p-1"
|
||||
/>
|
||||
</div>
|
||||
<span className="line-clamp-2 text-[13px] font-medium leading-tight text-foreground">
|
||||
{shortName(g.reward.name)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{nextRewardDate ? (
|
||||
<p className="mt-3.5 text-center text-xs text-muted-foreground">
|
||||
Next gift on{" "}
|
||||
<span className="font-medium text-foreground">
|
||||
{fmtLong(nextRewardDate)}
|
||||
</span>
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{detail ? (
|
||||
<RewardDetail grant={detail} onClose={() => setDetail(null)} />
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function RewardDetail({
|
||||
grant,
|
||||
onClose,
|
||||
}: {
|
||||
grant: SadhnaRewardGrant;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const mounted = useMounted();
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => 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}
|
||||
/>
|
||||
<div 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">
|
||||
<div className="relative mx-auto mb-4 flex size-40 items-center justify-center">
|
||||
<div className="absolute inset-0 rounded-full bg-primary/10 blur-2xl" />
|
||||
<Image
|
||||
src={r.image_url}
|
||||
alt={r.name}
|
||||
width={224}
|
||||
height={224}
|
||||
sizes="224px"
|
||||
className="relative size-full object-contain drop-shadow-lg"
|
||||
/>
|
||||
</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}
|
||||
<p className="mt-4 text-xs text-muted-foreground">
|
||||
Earned on day {grant.milestone} of your streak
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="mt-5 inline-flex w-full items-center justify-center rounded-xl border border-border px-4 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
||||
/** The evocative term before the em-dash, for compact tile labels. */
|
||||
function shortName(name: string): string {
|
||||
const parts = name.split("—");
|
||||
return (parts[0] ?? name).trim();
|
||||
}
|
||||
|
||||
function fmtLong(date: string): string {
|
||||
const d = new Date(`${date}T00:00:00Z`);
|
||||
if (Number.isNaN(d.getTime())) return "";
|
||||
return d.toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
timeZone: "UTC",
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user