47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import * as Accordion from "@radix-ui/react-accordion";
|
|
import { ChevronDown } from "lucide-react";
|
|
|
|
export interface FAQItem {
|
|
id: number;
|
|
question: string;
|
|
answer: string;
|
|
}
|
|
|
|
interface FAQAccordionProps {
|
|
items: FAQItem[];
|
|
}
|
|
|
|
export default function FAQAccordion({ items }: FAQAccordionProps) {
|
|
return (
|
|
<Accordion.Root type="single" collapsible className="w-full">
|
|
{items.map((item, index) => (
|
|
<Accordion.Item
|
|
key={item.id}
|
|
value={String(item.id)}
|
|
className="border-b border-slate-700 py-6"
|
|
>
|
|
<Accordion.Trigger className="group flex w-full items-center justify-between text-left">
|
|
<h3 className="font-almarai text-lg font-bold uppercase tracking-wide text-white transition-colors duration-300 group-hover:cursor-pointer md:text-xl">
|
|
{item.question}
|
|
</h3>
|
|
<div className="ml-4 shrink-0">
|
|
<ChevronDown
|
|
className="h-6 w-6 text-red-600 transition-transform duration-300 group-data-[state=open]:rotate-180"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
</Accordion.Trigger>
|
|
|
|
<Accordion.Content className="overflow-hidden pt-4 text-gray-400 animate-in fade-in slide-in-from-top-2 duration-300 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-2">
|
|
<p className="font-almarai leading-relaxed text-sm md:text-base">
|
|
{item.answer}
|
|
</p>
|
|
</Accordion.Content>
|
|
</Accordion.Item>
|
|
))}
|
|
</Accordion.Root>
|
|
);
|
|
}
|