49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import type { CollapseBlockPayload } from "@/lib/blog-blocks";
|
|
|
|
interface BlogCollapseSectionProps {
|
|
section: CollapseBlockPayload;
|
|
/** Optional prefix for accordion item ids (e.g. for multiple sections on one page). */
|
|
idPrefix?: string;
|
|
}
|
|
|
|
export function BlogCollapseSection({
|
|
section,
|
|
idPrefix = "collapse",
|
|
}: BlogCollapseSectionProps) {
|
|
if (!section.items.length) return null;
|
|
|
|
return (
|
|
<div className="my-8 space-y-4 border rounded-md p-6">
|
|
{section.title ? (
|
|
<h2 className="text-2xl font-bold !mt-0 mb-4 scroll-mt-24">
|
|
{section.title}
|
|
</h2>
|
|
) : null}
|
|
<Accordion type="single" collapsible className="w-full">
|
|
{section.items.map((item, i) => (
|
|
<AccordionItem
|
|
key={i}
|
|
value={`${idPrefix}-${i}`}
|
|
className="border-b last:border-b-0 !m-0"
|
|
>
|
|
<AccordionTrigger className="text-right hover:no-underline py-4 [&>svg]:shrink-0">
|
|
{item.question}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-muted-foreground leading-relaxed text-justify">
|
|
{item.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|