63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* VaniOfTheDayCTA — a home-page card suggesting the day's "Vāṇī of the Day":
|
|
* one prose chapter, verse, or lecture chosen by the backend (the same for
|
|
* everyone that day, never repeating within 90 days). Tapping it opens the
|
|
* item. Renders nothing until/unless the pick loads, so it never leaves an
|
|
* empty frame. Styled to match SadhnaStreakCTA.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { ChevronRight, Quote } from "lucide-react";
|
|
import { getVaniOfTheDay, type Vani } from "@/lib/vani";
|
|
|
|
export function VaniOfTheDayCTA() {
|
|
const [vani, setVani] = useState<Vani | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
getVaniOfTheDay()
|
|
.then((v) => {
|
|
if (!cancelled) setVani(v);
|
|
})
|
|
.catch(() => {
|
|
/* card simply doesn't render */
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
if (!vani) return null;
|
|
|
|
return (
|
|
<Link
|
|
href={vani.href}
|
|
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 bg-primary/10 text-primary">
|
|
<Quote className="size-6" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="flex items-center gap-1.5 text-[0.7rem] font-medium uppercase tracking-[0.14em] text-primary">
|
|
Vāṇī of the day
|
|
<span className="rounded bg-muted px-1.5 py-0.5 text-[0.65rem] tracking-normal text-muted-foreground">
|
|
{vani.label}
|
|
</span>
|
|
</p>
|
|
<p className="mt-0.5 truncate text-base font-semibold text-foreground leading-snug">
|
|
{vani.title}
|
|
</p>
|
|
{vani.subtitle ? (
|
|
<p className="truncate text-sm text-muted-foreground leading-snug">
|
|
{vani.subtitle}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
<ChevronRight className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
|
|
</Link>
|
|
);
|
|
}
|