220 lines
6.6 KiB
TypeScript
220 lines
6.6 KiB
TypeScript
/**
|
||
* KnowledgebaseIndex — the books / letters / lectures / essays / etc.
|
||
* directory layout. Rendered as the search page's empty state so an
|
||
* untyped search bar still gives users an editorial entry point into the
|
||
* library.
|
||
*
|
||
* Two sections, top to bottom:
|
||
* 1. Start here — a Quizzes tile, then three primary entry points
|
||
* (Books, Letters, Lectures), all one width
|
||
* rendered as full-width feature tiles with longer copy.
|
||
* 2. Explore — a six-card asymmetric grid for the remaining sections.
|
||
*
|
||
* No hero block; the parent page (Search) carries its own hero so two
|
||
* heroes don't stack on top of each other.
|
||
*/
|
||
|
||
import Link from "next/link";
|
||
import {
|
||
ArrowUpRight,
|
||
BookA,
|
||
BookOpen,
|
||
FileStack,
|
||
Mail,
|
||
Mic,
|
||
Newspaper,
|
||
NotebookPen,
|
||
PenLine,
|
||
Users,
|
||
} from "lucide-react";
|
||
import { QuizzesCTA } from "@/components/quiz/quizzes-cta";
|
||
|
||
type Feature = {
|
||
href: string;
|
||
label: string;
|
||
blurb: string;
|
||
count?: string;
|
||
icon: React.ComponentType<{ className?: string }>;
|
||
};
|
||
|
||
const FEATURED: Feature[] = [
|
||
{
|
||
href: "/books",
|
||
label: "Books",
|
||
blurb:
|
||
"Bhagavad-gītā, Śrīmad-Bhāgavatam, Caitanya-caritāmṛta and 34 more — each verse with Devanāgarī, transliteration, synonyms, translation and purport.",
|
||
count: "37 books",
|
||
icon: BookOpen,
|
||
},
|
||
{
|
||
href: "/letters",
|
||
label: "Letters",
|
||
blurb:
|
||
"Three decades of personal correspondence to disciples, family, and officials. Browse by year, recipient, or location.",
|
||
count: "6,866 letters",
|
||
icon: Mail,
|
||
},
|
||
{
|
||
href: "/transcriptions",
|
||
label: "Lectures & Conversations",
|
||
blurb:
|
||
"Lectures, morning walks, room conversations, and dialogues — the living voice of the Founder-Ācārya preserved in text and audio.",
|
||
count: "3,787 transcripts",
|
||
icon: Mic,
|
||
},
|
||
];
|
||
|
||
const EXPLORE: Feature[] = [
|
||
{
|
||
href: "/essays",
|
||
label: "Essays",
|
||
blurb: "Foundational standalone essays.",
|
||
count: "23 essays",
|
||
icon: PenLine,
|
||
},
|
||
{
|
||
href: "/magazines",
|
||
label: "Back to Godhead",
|
||
blurb: "The original 1944 – 1973 magazine archive.",
|
||
count: "1,124 articles",
|
||
icon: Newspaper,
|
||
},
|
||
{
|
||
href: "/journals",
|
||
label: "Journals",
|
||
blurb: "The Jaladuta Diary and The Beginning.",
|
||
count: "300 entries",
|
||
icon: NotebookPen,
|
||
},
|
||
{
|
||
href: "/glossary",
|
||
label: "Glossary",
|
||
blurb: "Sanskrit and Vedic terms with definitions.",
|
||
count: "2,749 terms",
|
||
icon: BookA,
|
||
},
|
||
{
|
||
href: "/disciples",
|
||
label: "Disciples",
|
||
blurb: "Initiated disciples 1966 – 1977.",
|
||
count: "4,747 names",
|
||
icon: Users,
|
||
},
|
||
{
|
||
href: "/other-documents",
|
||
label: "Other Documents",
|
||
blurb: "Miscellaneous analyses and writings.",
|
||
count: "12 documents",
|
||
icon: FileStack,
|
||
},
|
||
];
|
||
|
||
export function KnowledgebaseIndex() {
|
||
return (
|
||
<div>
|
||
<section className="py-4">
|
||
<SectionHeading eyebrow="Start here" title="Three doors in" />
|
||
{/* One grid so all four share a width. Quizzes lead: something to
|
||
do, ahead of the three ways in to read. Absent until one is
|
||
published, leaving the original three across. */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-none lg:grid-flow-col lg:auto-cols-fr gap-4 sm:gap-5">
|
||
<QuizzesCTA variant="tile" />
|
||
{FEATURED.map((f) => (
|
||
<FeaturedTile key={f.href} feature={f} />
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="py-6 sm:py-8">
|
||
<SectionHeading eyebrow="Explore" title="The wider library" />
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
|
||
{EXPLORE.map((f) => (
|
||
<ExploreTile key={f.href} feature={f} />
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FeaturedTile({ feature }: { feature: Feature }) {
|
||
const Icon = feature.icon;
|
||
return (
|
||
<Link
|
||
href={feature.href}
|
||
className="group relative flex flex-col h-full rounded-2xl bg-card ring-1 ring-foreground/10 hover:ring-foreground/25 hover:shadow-md transition-all p-6"
|
||
>
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex items-center justify-center size-11 rounded-xl bg-primary/12 text-primary">
|
||
<Icon className="size-5" />
|
||
</div>
|
||
<ArrowUpRight className="size-4 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
|
||
</div>
|
||
|
||
<h3 className="mt-5 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-[1.6rem] lg:text-[1.35rem] leading-tight text-foreground">
|
||
{feature.label}
|
||
</h3>
|
||
|
||
<p className="mt-2 text-sm text-muted-foreground leading-relaxed flex-1">
|
||
{feature.blurb}
|
||
</p>
|
||
|
||
{feature.count ? (
|
||
<p className="mt-5 text-xs uppercase tracking-[0.14em] font-medium text-muted-foreground">
|
||
{feature.count}
|
||
</p>
|
||
) : null}
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
function ExploreTile({ feature }: { feature: Feature }) {
|
||
const Icon = feature.icon;
|
||
return (
|
||
<Link
|
||
href={feature.href}
|
||
className="group flex items-start gap-4 rounded-xl bg-card/70 ring-1 ring-foreground/8 hover:ring-foreground/20 hover:bg-card transition-all p-4 sm:p-5"
|
||
>
|
||
<div className="flex items-center justify-center size-9 rounded-lg bg-secondary text-secondary-foreground/80 shrink-0">
|
||
<Icon className="size-4" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<h4 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground leading-tight">
|
||
{feature.label}
|
||
</h4>
|
||
<ArrowUpRight className="size-3.5 text-muted-foreground/50 group-hover:text-foreground transition-colors shrink-0" />
|
||
</div>
|
||
<p className="text-sm text-muted-foreground mt-1 leading-relaxed">
|
||
{feature.blurb}
|
||
</p>
|
||
{feature.count ? (
|
||
<p className="text-xs uppercase tracking-[0.14em] font-medium text-muted-foreground/80 mt-2">
|
||
{feature.count}
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
function SectionHeading({
|
||
eyebrow,
|
||
title,
|
||
}: {
|
||
eyebrow: string;
|
||
title: string;
|
||
}) {
|
||
return (
|
||
<div className="mb-6 flex items-baseline gap-4">
|
||
<span className="text-xs uppercase tracking-[0.2em] font-semibold text-muted-foreground">
|
||
{eyebrow}
|
||
</span>
|
||
<span className="flex-1 h-px bg-border" />
|
||
<h2 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground">
|
||
{title}
|
||
</h2>
|
||
</div>
|
||
);
|
||
}
|