39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import type { FaqItem } from "@/content/home";
|
|
|
|
export type { FaqItem };
|
|
|
|
export interface FaqProps {
|
|
items: readonly FaqItem[];
|
|
className?: string;
|
|
}
|
|
|
|
/** DM Mono „+“ that turns into „ד by rotating 45° when the `<details>` is open. */
|
|
export const PLUS_GLYPH =
|
|
"font-mono text-base leading-none text-accent transition-transform duration-300 ease-[var(--ease-out-quart)] group-open:rotate-45";
|
|
|
|
/**
|
|
* Native `<details>/<summary>` ledger: question Bodoni 28 px, answer Jost 400,
|
|
* hairline-separated, no accordion library. Fully usable without JS.
|
|
*/
|
|
export function Faq({ items, className }: FaqProps) {
|
|
if (!items.length) return null;
|
|
return (
|
|
<div className={cn("border-t border-line", className)}>
|
|
{items.map((item) => (
|
|
<details key={item.q} className="group border-b border-line">
|
|
<summary className="flex cursor-pointer list-none items-baseline justify-between gap-6 py-6 [&::-webkit-details-marker]:hidden">
|
|
<span className="font-display text-[1.75rem] font-normal leading-[1.15] text-fg">{item.q}</span>
|
|
<span aria-hidden="true" className={cn(PLUS_GLYPH, "shrink-0 self-center")}>
|
|
+
|
|
</span>
|
|
</summary>
|
|
<p className="max-w-[36rem] pb-8 font-sans text-[1.0625rem] leading-[1.6] text-fg">{item.a}</p>
|
|
</details>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Faq;
|