feat: add daily vani

2026-07-11 00:31:37 +05:30
parent 7f716397a0
commit 89391279bb
3 changed files with 98 additions and 1 deletions
@@ -0,0 +1,62 @@
+"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>
+  );
+}