feat: add user centric features

This commit is contained in:
gosangam
2026-05-30 23:44:08 +05:30
parent 7bd2952caa
commit dcdd2383c6
63 changed files with 16783 additions and 1735 deletions
+7 -48
View File
@@ -8,6 +8,7 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { buildSearchResultUrl } from "@/lib/text-highlight";
import { KnowledgebaseIndex } from "@/components/knowledgebase-index";
import {
Search,
Loader2,
@@ -329,12 +330,12 @@ function SearchInner() {
<p className="uppercase tracking-[0.22em] text-xs font-semibold text-muted-foreground">
Search
</p>
<h1 className="mt-4 font-[family-name:var(--font-title)] font-semibold text-4xl sm:text-5xl leading-tight text-foreground">
<h1 className="mt-4 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-4xl leading-tight text-foreground">
Find a word, a verse, a name.
</h1>
<p className="mt-3 max-w-xl text-base text-muted-foreground leading-relaxed">
Typo-tolerant search across every book, letter, lecture, essay,
journal, magazine, and glossary entry. Diacritics are ignored, so
Smart search across books, letters, lectures, essays,
journals and magazines. Diacritics are ignored, so
&ldquo;Krsna&rdquo; finds &ldquo;Kṛṣṇa.&rdquo;
</p>
</section>
@@ -426,10 +427,9 @@ function SearchInner() {
</div>
)}
{/* No query — show editorial empty state with example queries */}
{!isLoading && !hasSearched && (
<EmptyStateExamples onPick={(q) => setInputValue(q)} />
)}
{/* No query — render the full Knowledgebase index so the search
page doubles as the browsing entry point. */}
{!isLoading && !hasSearched && <KnowledgebaseIndex />}
{/* No results */}
{!isLoading &&
@@ -634,47 +634,6 @@ function ResultCard({ result }: { result: SearchResult }) {
);
}
// ---------------------------------------------------------------------------
// Empty-state example chips
// ---------------------------------------------------------------------------
const EXAMPLE_QUERIES: { label: string; query: string }[] = [
{ label: "sarva dharman parityajya", query: "sarva dharman parityajya" },
{ label: "letter to mukunda", query: "letter to mukunda" },
{ label: "bhakti yoga", query: "bhakti yoga" },
{ label: "tulasi", query: "tulasi" },
{ label: "morning walk los angeles", query: "morning walk los angeles" },
];
function EmptyStateExamples({ onPick }: { onPick: (q: string) => void }) {
return (
<div className="py-12 sm:py-16">
<p className="text-xs uppercase tracking-[0.2em] font-semibold text-muted-foreground text-center">
Try one of these
</p>
<div className="mt-5 flex flex-wrap items-center justify-center gap-2 max-w-2xl mx-auto">
{EXAMPLE_QUERIES.map((ex) => (
<button
key={ex.query}
type="button"
onClick={() => onPick(ex.query)}
className="rounded-full bg-card ring-1 ring-foreground/10 hover:ring-foreground/30 px-3.5 py-1.5 text-sm font-medium text-foreground transition-all"
>
{ex.label}
</button>
))}
</div>
<p className="mt-8 text-center text-xs text-muted-foreground">
Press{" "}
<kbd className="rounded border border-border bg-card px-1.5 py-0.5 text-[0.7rem]">
/
</kbd>{" "}
from any page to jump here.
</p>
</div>
);
}
// ---------------------------------------------------------------------------
// Result Meta — varies by collection
// ---------------------------------------------------------------------------