feat(frontend): add HUD header and GSAP accordion reveal to glossary route
This commit is contained in:
asepharyana
@@ -1,71 +1,130 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Globe } from "lucide-react";
|
import { ChevronDown, Globe } from "lucide-react";
|
||||||
|
import { useRef, useState } from "react";
|
||||||
import { GlassPanel } from "@/components/primitives";
|
import { GlassPanel } from "@/components/primitives";
|
||||||
import { SectionHeader } from "@/components/shared";
|
import { SectionHeader } from "@/components/shared";
|
||||||
|
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||||
import { downloadCsv } from "@/lib/csv";
|
import { downloadCsv } from "@/lib/csv";
|
||||||
import { formatRelativeTime } from "@/lib/format";
|
import { formatRelativeTime } from "@/lib/format";
|
||||||
import type { GlossaryRow } from "@/lib/types";
|
import type { GlossaryRow } from "@/lib/types";
|
||||||
|
|
||||||
export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
|
function GlossaryEntry({ t }: { t: GlossaryRow }) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const bodyRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GlassPanel className="lg:col-span-3">
|
<div className="glossary-entry overflow-hidden rounded-md border border-hairline bg-surface/30">
|
||||||
<SectionHeader
|
<button
|
||||||
eyebrow="knowledge"
|
type="button"
|
||||||
title="Term Knowledge Base"
|
onClick={() => setOpen((v) => !v)}
|
||||||
action={
|
className="flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left transition-colors hover:bg-surface/50"
|
||||||
terms.length > 0 ? (
|
aria-expanded={open}
|
||||||
<button
|
>
|
||||||
type="button"
|
<span className="flex min-w-0 items-baseline gap-2">
|
||||||
onClick={() =>
|
<span className="truncate font-medium text-ink">{t.term}</span>
|
||||||
downloadCsv(
|
<span className="mono shrink-0 text-[10px] text-ink-faint">
|
||||||
"glossary.csv",
|
{t.hit_count} uses
|
||||||
terms.map((t) => ({
|
</span>
|
||||||
term: t.term,
|
</span>
|
||||||
definition: t.definition,
|
<span className="flex shrink-0 items-center gap-2 font-mono text-[10px] text-ink-faint">
|
||||||
source: t.source_url,
|
{formatRelativeTime(t.resolved_at)}
|
||||||
resolved: t.resolved_at,
|
<ChevronDown
|
||||||
hits: t.hit_count,
|
className={`size-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
|
||||||
})),
|
/>
|
||||||
)
|
</span>
|
||||||
}
|
</button>
|
||||||
className="flex items-center gap-1.5 text-xs text-ink-soft hover:text-ink"
|
<div
|
||||||
>
|
ref={bodyRef}
|
||||||
CSV
|
className="grid transition-[grid-template-rows] duration-300 ease-out"
|
||||||
</button>
|
style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
|
||||||
) : null
|
>
|
||||||
}
|
<div className="overflow-hidden">
|
||||||
/>
|
<div className="border-t border-hairline px-3 py-2.5 text-sm">
|
||||||
{terms.length === 0 ? (
|
<p className="text-ink-faint">{t.definition}</p>
|
||||||
<p className="py-6 text-center text-xs text-ink-faint">
|
{t.source_url && (
|
||||||
No term resolutions cached yet.
|
<a
|
||||||
</p>
|
href={t.source_url}
|
||||||
) : (
|
target="_blank"
|
||||||
<div className="space-y-3">
|
rel="noopener noreferrer"
|
||||||
{terms.map((t) => (
|
className="mt-1.5 inline-flex items-center gap-1 text-xs text-ink-soft hover:text-ink"
|
||||||
<div key={t.term} className="text-sm">
|
>
|
||||||
<div className="flex flex-wrap items-baseline justify-between gap-2">
|
<Globe className="size-3" />
|
||||||
<span className="font-medium text-ink">{t.term}</span>
|
{t.source_url}
|
||||||
<span className="text-xs text-ink-faint">
|
</a>
|
||||||
{t.hit_count} uses · {formatRelativeTime(t.resolved_at)}
|
)}
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
<p className="mt-1 text-ink-faint">{t.definition}</p>
|
|
||||||
{t.source_url && (
|
|
||||||
<a
|
|
||||||
href={t.source_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="mt-0.5 text-xs text-ink-soft hover:text-ink"
|
|
||||||
>
|
|
||||||
<Globe className="mr-1 inline size-3" />
|
|
||||||
{t.source_url}
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</GlassPanel>
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
|
||||||
|
const listRef = useStaggerReveal<HTMLDivElement>(".glossary-entry", {
|
||||||
|
stagger: 0.035,
|
||||||
|
y: 10,
|
||||||
|
dependencies: [terms],
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Tactical HUD Header Bar */}
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="relative flex size-3 items-center justify-center">
|
||||||
|
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
|
||||||
|
<span className="relative inline-flex size-2 rounded-full bg-signal" />
|
||||||
|
</div>
|
||||||
|
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||||
|
TERM GLOSSARY · KB_INDEX
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
|
||||||
|
<span className="text-ink-faint">TERMS:</span>
|
||||||
|
<span className="font-bold text-signal">{terms.length}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<GlassPanel className="lg:col-span-3">
|
||||||
|
<SectionHeader
|
||||||
|
eyebrow="knowledge"
|
||||||
|
title="Term Knowledge Base"
|
||||||
|
action={
|
||||||
|
terms.length > 0 ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
downloadCsv(
|
||||||
|
"glossary.csv",
|
||||||
|
terms.map((t) => ({
|
||||||
|
term: t.term,
|
||||||
|
definition: t.definition,
|
||||||
|
source: t.source_url,
|
||||||
|
resolved: t.resolved_at,
|
||||||
|
hits: t.hit_count,
|
||||||
|
})),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink"
|
||||||
|
>
|
||||||
|
EXPORT_CSV
|
||||||
|
</button>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{terms.length === 0 ? (
|
||||||
|
<p className="py-6 text-center font-mono text-xs text-ink-faint">
|
||||||
|
NO TERM RESOLUTIONS CACHED YET
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div ref={listRef} className="space-y-2">
|
||||||
|
{terms.map((t) => (
|
||||||
|
<GlossaryEntry key={t.term} t={t} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</GlassPanel>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user