mmintelandClaude Opus 5.5
7a71296e6d
Opening one question pushed everything below it down. The answers are two or three lines long, so they are simply shown: two columns on wide screens, one on phones. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
23 lines
877 B
TypeScript
23 lines
877 B
TypeScript
import * as React from "react";
|
|
import type { FaqItem } from "@/src/content/types";
|
|
|
|
/**
|
|
* Faq: a handful of short questions with their answers, all open. No accordion:
|
|
* opening one pushed everything below it down (owner feedback), and with
|
|
* answers of two or three lines there is nothing worth hiding.
|
|
*/
|
|
export const Faq: React.FC<{ items: readonly FaqItem[] }> = ({ items }) => (
|
|
<dl className="m-0 grid grid-cols-1 gap-x-12 gap-y-10 md:grid-cols-2 md:gap-y-14">
|
|
{items.map((item) => (
|
|
<div key={item.question} className="border-t border-slate-900 pt-6">
|
|
<dt className="font-sans text-xl font-bold tracking-tight text-slate-900 md:text-2xl">
|
|
{item.question}
|
|
</dt>
|
|
<dd className="m-0 mt-3 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
|
|
{item.answer}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
);
|