40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import type { FactItem } from "@/content/home";
|
|
import { PlaceholderText, visibleFacts } from "./Facts";
|
|
|
|
export interface FactsStripProps {
|
|
items: readonly FactItem[];
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Speaker facts: one full-width row of equal cells separated by 1 px
|
|
* vertical hairlines. Each cell = DM Mono label (muted) + Jost value.
|
|
* Wraps to 2 / 3 columns below 1024 px.
|
|
*/
|
|
export function FactsStrip({ items, className }: FactsStripProps) {
|
|
const rows = visibleFacts(items);
|
|
if (!rows.length) return null;
|
|
return (
|
|
<dl
|
|
className={cn(
|
|
"grid grid-cols-2 border-y border-line sm:grid-cols-3 lg:grid-cols-6",
|
|
"[&>div]:border-l [&>div]:border-line [&>div:first-child]:border-l-0",
|
|
"[&>div:nth-child(2n+1)]:max-sm:border-l-0 [&>div:nth-child(3n+1)]:sm:max-lg:border-l-0",
|
|
className,
|
|
)}
|
|
>
|
|
{rows.map((f) => (
|
|
<div key={f.label} className="flex flex-col gap-2 px-5 py-6 lg:px-6 lg:py-7">
|
|
<dt className="font-mono text-xs tracking-[0.06em] text-fg-muted">{f.label}</dt>
|
|
<dd className="font-sans text-[1.0625rem] leading-snug text-fg">
|
|
<PlaceholderText text={f.value} />
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
);
|
|
}
|
|
|
|
export default FactsStrip;
|