83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import type { HistoryAccent, HistoryItem, HistoryViewProps } from "./History.types";
|
|
|
|
const ACCENT_CLASS: Record<HistoryAccent, string> = {
|
|
brand: "bg-[var(--color-content-default-brand-primary)]",
|
|
positive: "bg-[var(--color-surface-default-positive-primary)]",
|
|
};
|
|
|
|
const DATE_CLASS =
|
|
"font-bricolage-grotesque text-display-xxs text-[var(--color-content-default-primary)]";
|
|
|
|
const BODY_CLASS =
|
|
"font-inter text-paragraph-m text-[var(--color-content-default-secondary)]";
|
|
|
|
function DateMark({ date, accent }: { date: string; accent: HistoryAccent }) {
|
|
return (
|
|
<div className="flex w-full flex-col gap-1 md:w-[140px] md:shrink-0">
|
|
<p className={`${DATE_CLASS} whitespace-nowrap`}>{date}</p>
|
|
<span className={`h-0.5 w-8 ${ACCENT_CLASS[accent]}`} aria-hidden />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HistoryItemView({ item }: { item: HistoryItem }) {
|
|
if (item.kind === "callout") {
|
|
return (
|
|
<aside className="flex flex-col gap-5 border-l-[3px] border-[var(--color-content-default-brand-primary)] pl-6">
|
|
<p className={DATE_CLASS}>{item.title}</p>
|
|
<p className={BODY_CLASS}>{item.body}</p>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`flex flex-col gap-4 md:flex-row md:gap-8 ${
|
|
item.accent === "positive" ? "pt-6" : ""
|
|
}`}
|
|
>
|
|
<DateMark date={item.date} accent={item.accent} />
|
|
<p className={`min-w-0 flex-1 ${BODY_CLASS}`}>
|
|
{item.body.map((run, index) =>
|
|
run.emphasis ? (
|
|
<em key={index} className="italic">
|
|
{run.text}
|
|
</em>
|
|
) : (
|
|
<span key={index}>{run.text}</span>
|
|
),
|
|
)}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HistoryView({ heading, items }: HistoryViewProps) {
|
|
return (
|
|
<section
|
|
data-figma-node="24220:30635"
|
|
className="flex flex-col items-center gap-10 bg-black px-[var(--space-400)] py-12 md:gap-16 md:px-[var(--space-1800)] md:py-[88px]"
|
|
aria-labelledby="about-history-heading"
|
|
>
|
|
<h2
|
|
id="about-history-heading"
|
|
className="w-full max-w-[800px] text-center font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)]"
|
|
>
|
|
{heading}
|
|
</h2>
|
|
<div className="flex w-full max-w-[800px] flex-col gap-8 md:gap-10">
|
|
{items.map((item, index) => (
|
|
<HistoryItemView key={item.kind === "entry" ? item.date : index} item={item} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
HistoryView.displayName = "HistoryView";
|
|
|
|
export default memo(HistoryView);
|