122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* SadhnaStreakCTA — a compact streak card for the homepage. Tapping it opens
|
|
* /sadhna-streak. For a signed-in devotee it shows their live streak and
|
|
* today's status; for visitors it's a gentle invitation to begin. The feed
|
|
* will sit alongside this later.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ChevronRight } from "lucide-react";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { sadhna, type SadhnaDashboard } from "@/lib/sadhna";
|
|
import { StreakFlame } from "@/components/sadhna/streak-flame";
|
|
|
|
export function SadhnaStreakCTA({
|
|
compact = false,
|
|
}: {
|
|
/**
|
|
* Icon-only tile for the homepage row beside Vāṇī of the Day. The streak
|
|
* and today's status move into the accessible label and tooltip, and the
|
|
* tile tints while a streak is running.
|
|
*/
|
|
compact?: boolean;
|
|
} = {}) {
|
|
const { user, loading } = useAuth();
|
|
const authed = !loading && !!user;
|
|
const [dash, setDash] = useState<SadhnaDashboard | null>(null);
|
|
|
|
useEffect(() => {
|
|
// Only fetch when signed in; never setState synchronously here. A stale
|
|
// dash from a previous session is ignored in render via `data` below.
|
|
if (!authed) return;
|
|
let cancelled = false;
|
|
sadhna
|
|
.dashboard()
|
|
.then((d) => {
|
|
if (!cancelled) setDash(d);
|
|
})
|
|
.catch(() => {
|
|
/* card stays in its invitation state */
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [authed]);
|
|
|
|
// Ignore any leftover dashboard when not authed (e.g. after sign-out).
|
|
const data = authed ? dash : null;
|
|
const streak = data?.current_streak ?? 0;
|
|
|
|
const title = !authed
|
|
? "Daily Sādhana"
|
|
: streak > 0
|
|
? `${streak} day${streak === 1 ? "" : "s"} sadhna streak`
|
|
: "Start your streak";
|
|
|
|
const subtitle = !authed
|
|
? "Chant your rounds and share a verse each day"
|
|
: data?.today_completed
|
|
? "Today's sādhana is complete 🌸"
|
|
: data?.chant_done || data?.quote_done
|
|
? "One offering done — finish today"
|
|
: "Chant and post a quote to complete today";
|
|
|
|
if (compact) {
|
|
const active = streak > 0;
|
|
return (
|
|
<Link
|
|
href="/sadhna-streak"
|
|
aria-label={`${title}. ${subtitle}`}
|
|
title={`${title} — ${subtitle}`}
|
|
className={
|
|
// An explicit square matching the homepage row's h-24. Deriving the
|
|
// width from height (aspect-square + h-full) collapses to the icon in
|
|
// Safari, so both sides are fixed.
|
|
"group p-2 flex flex-col size-24 shrink-0 items-center justify-center rounded-2xl border transition-colors " +
|
|
(active
|
|
? "border-primary/30 bg-primary/10 hover:border-primary/50"
|
|
: "border-border bg-card hover:border-primary/40 hover:bg-muted/40")
|
|
}
|
|
>
|
|
<Image
|
|
src="/icons/chanting-beads.svg"
|
|
alt=""
|
|
width={44}
|
|
height={44}
|
|
className="size-12 transition-transform group-hover:scale-105"
|
|
unoptimized
|
|
/>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href="/sadhna-streak"
|
|
className="group flex w-full max-w-md items-center gap-3.5 rounded-2xl border border-border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-muted/40"
|
|
>
|
|
<span
|
|
className={
|
|
"inline-flex size-12 shrink-0 items-center justify-center rounded-full " +
|
|
(streak > 0 ? "bg-orange-500/15" : "bg-muted")
|
|
}
|
|
>
|
|
<StreakFlame className="size-7" muted={streak === 0} />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-base font-semibold text-foreground leading-snug">
|
|
{title}
|
|
</p>
|
|
<p className="truncate text-sm text-muted-foreground leading-snug">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
<ChevronRight className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
|
|
</Link>
|
|
);
|
|
}
|