187 lines
7.0 KiB
TypeScript
187 lines
7.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
||
import { TransitionLink } from "@/components/motion/TransitionLink";
|
||
import { RevealGroup, RevealItem } from "@/components/motion/Reveal";
|
||
import { termine as termineDe } from "@/content/home";
|
||
import type { GoalRow, SituationRow, TermineRow, TocRow, WerdegangRow } from "@/content/home";
|
||
import { TEXT_LINK } from "./TextLink";
|
||
|
||
export type { GoalRow, SituationRow, TermineRow, TocRow, WerdegangRow };
|
||
|
||
export type LedgerRow = TocRow | WerdegangRow | TermineRow | SituationRow | GoalRow;
|
||
|
||
interface LedgerBase {
|
||
className?: string;
|
||
/** Stagger between rows (default 0.1 s). */
|
||
stagger?: number;
|
||
}
|
||
|
||
export type LedgerProps =
|
||
| (LedgerBase & { variant: "toc"; rows: readonly TocRow[] })
|
||
| (LedgerBase & { variant: "werdegang"; rows: readonly WerdegangRow[] })
|
||
| (LedgerBase & { variant: "termine"; rows: readonly TermineRow[]; heading?: string })
|
||
| (LedgerBase & { variant: "situations"; rows: readonly SituationRow[] })
|
||
| (LedgerBase & { variant: "goals"; rows: readonly GoalRow[] });
|
||
|
||
const MONO = "font-mono text-xs tracking-[0.06em] tabular-nums";
|
||
|
||
/* ---------------- toc ---------------- */
|
||
|
||
/**
|
||
* Table-of-contents row = ONE <TransitionLink> (keyboard: one tab stop).
|
||
* Hover: ground `--surface`, lower hairline turns gold (scaleX from the left,
|
||
* 0.6 s), arrow +8 px. No italic flip, nothing reflows – everything is
|
||
* always visible.
|
||
*/
|
||
function TocRowView({ row }: { row: TocRow }) {
|
||
return (
|
||
<TransitionLink
|
||
href={row.link.href}
|
||
label={row.title}
|
||
className="group relative grid grid-cols-1 gap-y-4 py-7 transition-colors duration-300 hover:bg-surface focus-visible:bg-surface lg:grid-cols-12 lg:gap-x-[clamp(16px,2vw,32px)] lg:py-10"
|
||
>
|
||
<span className="flex items-baseline gap-4 lg:col-span-5 lg:contents">
|
||
<span className={cn(MONO, "text-accent lg:col-span-1")}>{row.numeral}</span>
|
||
<span className="font-display text-[clamp(1.75rem,1.4rem+1.6vw,3rem)] font-normal leading-[1.05] text-fg lg:col-span-4">
|
||
{row.title}
|
||
</span>
|
||
</span>
|
||
<span className="flex flex-col gap-2 lg:col-span-5">
|
||
<span className="font-sans text-[1.0625rem] leading-snug text-fg">{row.oneLiner}</span>
|
||
<span className={cn(MONO, "text-fg-muted")}>{row.keywords.join(" · ")}</span>
|
||
</span>
|
||
<span className={cn(TEXT_LINK, "whitespace-nowrap lg:col-span-2 lg:justify-self-end lg:self-start")}>
|
||
<span>{row.link.label}</span>
|
||
<span aria-hidden="true" className="transition-transform duration-300 ease-[var(--ease-out-quart)] group-hover:translate-x-2">
|
||
→
|
||
</span>
|
||
</span>
|
||
{/* Lower hairline: recolours to gold from the left on hover. */}
|
||
<span
|
||
aria-hidden="true"
|
||
className="rule-gold absolute inset-x-0 bottom-[-1px] origin-left scale-x-0 transition-transform duration-[600ms] ease-[var(--ease-out-expo)] group-hover:scale-x-100 group-focus-visible:scale-x-100"
|
||
/>
|
||
</TransitionLink>
|
||
);
|
||
}
|
||
|
||
/* ---------------- termine ---------------- */
|
||
|
||
function TermineRowView({ row }: { row: TermineRow }) {
|
||
const inner = (
|
||
<>
|
||
<span className={cn(MONO, "text-[13px] text-fg")}>{row.date}</span>
|
||
<span className="font-sans text-[0.8125rem] font-medium uppercase tracking-[0.16em] text-fg-muted">{row.format}</span>
|
||
<span className="font-sans text-lg leading-snug text-fg lg:font-display lg:text-[1.75rem] lg:font-normal lg:leading-[1.1]">
|
||
{row.title}
|
||
</span>
|
||
<span className={cn(MONO, "text-fg-muted")}>
|
||
{row.venue}
|
||
{row.href && (
|
||
<>
|
||
{" "}
|
||
<span aria-hidden="true">↗</span>
|
||
</>
|
||
)}
|
||
</span>
|
||
</>
|
||
);
|
||
const cls =
|
||
"grid grid-cols-1 gap-y-1 py-5 lg:grid-cols-[1fr_1fr_2fr_1fr] lg:items-baseline lg:gap-x-8";
|
||
if (row.href) {
|
||
return (
|
||
<a href={row.href} target="_blank" rel="noopener noreferrer" className={cn(cls, "group/row")}>
|
||
{inner}
|
||
</a>
|
||
);
|
||
}
|
||
return <div className={cls}>{inner}</div>;
|
||
}
|
||
|
||
/* ---------------- Ledger ---------------- */
|
||
|
||
/**
|
||
* Typographic ledgers instead of cards. Rows are hairline-separated and
|
||
* stagger in via <RevealGroup/>; the toc variant's rows are links.
|
||
*/
|
||
export function Ledger(props: LedgerProps) {
|
||
const { className, stagger = 0.1 } = props;
|
||
|
||
if (props.variant === "toc") {
|
||
return (
|
||
<RevealGroup as="ol" stagger={stagger} className={cn("border-t border-line", className)}>
|
||
{props.rows.map((row) => (
|
||
<RevealItem key={row.numeral} as="li" className="border-b border-line">
|
||
<TocRowView row={row} />
|
||
</RevealItem>
|
||
))}
|
||
</RevealGroup>
|
||
);
|
||
}
|
||
|
||
if (props.variant === "werdegang") {
|
||
return (
|
||
<RevealGroup as="dl" stagger={stagger} className={cn("border-t border-line", className)}>
|
||
{props.rows.map((row) => (
|
||
<RevealItem
|
||
key={row.keyword}
|
||
className="grid grid-cols-1 gap-y-1 border-b border-line py-[18px] sm:grid-cols-4 sm:gap-x-6"
|
||
>
|
||
<dt className={cn(MONO, "uppercase text-accent sm:col-span-1")}>{row.keyword}</dt>
|
||
<dd className="font-sans text-[1.0625rem] leading-snug text-fg sm:col-span-3">{row.text}</dd>
|
||
</RevealItem>
|
||
))}
|
||
</RevealGroup>
|
||
);
|
||
}
|
||
|
||
if (props.variant === "termine") {
|
||
const heading = props.heading ?? termineDe.heading;
|
||
return (
|
||
<div className={cn("border border-line bg-surface p-6 sm:p-10", className)}>
|
||
<p className={cn(MONO, "mb-4 flex items-center gap-3 uppercase tracking-[0.12em] text-accent")}>
|
||
<span aria-hidden="true" className="inline-block h-1.5 w-1.5 shrink-0 bg-accent" />
|
||
{heading}
|
||
</p>
|
||
<RevealGroup as="ol" stagger={stagger} className="border-t border-line">
|
||
{props.rows.map((row) => (
|
||
<RevealItem key={`${row.date}-${row.title}`} as="li" className="border-b border-line">
|
||
<TermineRowView row={row} />
|
||
</RevealItem>
|
||
))}
|
||
</RevealGroup>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (props.variant === "situations") {
|
||
return (
|
||
<RevealGroup as="ol" stagger={stagger} className={cn("border-t border-line", className)}>
|
||
{props.rows.map((row) => (
|
||
<RevealItem
|
||
key={row.numeral}
|
||
as="li"
|
||
className="grid grid-cols-[2.5rem_1fr] gap-x-4 border-b border-line py-5 sm:grid-cols-[3rem_1fr] sm:gap-x-8"
|
||
>
|
||
<span className={cn(MONO, "pt-[0.5em] text-accent")}>{row.numeral}</span>
|
||
<span className="font-display text-[clamp(1.75rem,1.3rem+1.2vw,2rem)] font-normal italic leading-[1.2] text-fg">
|
||
{row.text}
|
||
</span>
|
||
</RevealItem>
|
||
))}
|
||
</RevealGroup>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<RevealGroup as="ul" stagger={stagger} className={cn("border-t border-line", className)}>
|
||
{props.rows.map((row) => (
|
||
<RevealItem key={row.text} as="li" className="border-b border-line py-4 font-sans text-[1.0625rem] leading-snug text-fg">
|
||
{row.text}
|
||
</RevealItem>
|
||
))}
|
||
</RevealGroup>
|
||
);
|
||
}
|
||
|
||
export default Ledger;
|