ar.azizan
aa6f3c9b35
- Added styles for WordPress table and button blocks in globals.css. - Updated layout.tsx to include a favicon. - Improved blog page layout and search functionality, including new search and filter icons. - Implemented related posts feature in blog post pages with new BlogBlockquote and BlogPullquote components. - Enhanced blog card display with a new variant for smaller cards. - Updated blog collapse sections for better user interaction. - Added new utility functions for extracting block data from WordPress content.
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import type { CollapseBlockPayload } from "@/lib/blog-blocks";
|
|
import { Icon } from "@iconify/react";
|
|
|
|
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-xl 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 gap-1">
|
|
{section.items.map((item, i) => (
|
|
<AccordionItem
|
|
key={i}
|
|
value={`${idPrefix}-${i}`}
|
|
className="border-none !m-0 hover:bg-muted has-[[data-state=open]]:bg-muted px-4 rounded-md"
|
|
>
|
|
<AccordionTrigger className="group/trigger text-right hover:no-underline cursor-pointer py-4 [&>svg]:shrink-0">
|
|
<span className="flex gap-1 items-center">
|
|
<Icon
|
|
icon="lucide:circle-small"
|
|
className="size-5 group-data-[state=open]/trigger:hidden"
|
|
/>
|
|
<Icon
|
|
icon="lucide:dot"
|
|
className="size-5 hidden group-data-[state=open]/trigger:inline-block"
|
|
/>
|
|
{item.question}
|
|
</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-muted-foreground leading-relaxed text-justify">
|
|
<div dangerouslySetInnerHTML={{ __html: item.answer }} />
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|