fix: questions and answers are all open instead of an accordion
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>
This commit is contained in:
@@ -1,26 +1,22 @@
|
||||
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 }) => (
|
||||
<div className="grid grid-cols-1 gap-x-12 md:grid-cols-2">
|
||||
<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) => (
|
||||
<details
|
||||
key={item.question}
|
||||
className="group border-t border-slate-200 py-6 open:pb-8"
|
||||
>
|
||||
<summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-sans text-xl font-bold tracking-tight text-slate-900 md:text-2xl [&::-webkit-details-marker]:hidden">
|
||||
<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}
|
||||
<span
|
||||
className="mt-1 shrink-0 font-mono text-xl text-slate-400 transition-transform duration-300 group-open:rotate-45"
|
||||
aria-hidden="true"
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</summary>
|
||||
<p className="m-0 mt-4 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
|
||||
</dt>
|
||||
<dd className="m-0 mt-3 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
|
||||
{item.answer}
|
||||
</p>
|
||||
</details>
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</dl>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user