42 lines
1.8 KiB
TypeScript
42 lines
1.8 KiB
TypeScript
import type { FaqBlock as FaqBlockData } from '#web-runtime/types';
|
||
|
||
export default function FaqBlock({ block }: { block: FaqBlockData }) {
|
||
return (
|
||
<section
|
||
className="border-b border-[#d6d7cf] py-[clamp(4.5rem,9vw,8rem)] nth-of-type-[even]:bg-[#fffdf8]"
|
||
data-page-block={block.type}
|
||
>
|
||
<div className="mx-auto grid w-[min(calc(100%-2rem),76rem)] grid-cols-[minmax(15rem,0.65fr)_minmax(0,1fr)] items-start gap-[clamp(2rem,7vw,7rem)] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)] max-[45rem]:grid-cols-1">
|
||
{block.title || block.subtitle ? (
|
||
<header className="sticky top-8 max-w-3xl max-[45rem]:static">
|
||
{block.title ? (
|
||
<h2 className="text-[clamp(2rem,4vw,3.8rem)] leading-[1.04] font-semibold tracking-[-0.055em]">
|
||
{block.title}
|
||
</h2>
|
||
) : null}
|
||
{block.subtitle ? (
|
||
<p className="mt-4 max-w-160 text-lg leading-[1.6] text-[#5d675f]">
|
||
{block.subtitle}
|
||
</p>
|
||
) : null}
|
||
</header>
|
||
) : null}
|
||
|
||
<div className="border-t border-[#172019]">
|
||
{block.items.map((item, index) => (
|
||
<details
|
||
className="group border-b border-[#d6d7cf] py-5"
|
||
key={`${block.id}-item-${index}`}
|
||
>
|
||
<summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-[1.05rem] leading-[1.4] font-bold marker:hidden after:shrink-0 after:font-mono after:text-[1.35rem] after:text-[#517000] after:content-['+'] group-open:after:content-['−'] [&::-webkit-details-marker]:hidden">
|
||
{item.question}
|
||
</summary>
|
||
<p className="mt-4 max-w-180 leading-[1.7] text-[#5d675f]">{item.answer}</p>
|
||
</details>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|