72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { faqData, FaqItem } from '@/content/faq';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface FaqAccordionProps {
|
|
category: FaqItem['category'];
|
|
}
|
|
|
|
export const FaqAccordion = ({ category }: FaqAccordionProps) => {
|
|
const [openId, setOpenId] = useState<string | null>(null);
|
|
|
|
const faqs = faqData.filter(item => item.category === category);
|
|
|
|
if (faqs.length === 0) return null;
|
|
|
|
return (
|
|
<section className="py-16 bg-gray-50">
|
|
<div className="container mx-auto px-4 md:px-8 max-w-3xl">
|
|
<div className="text-center mb-10">
|
|
<h2 className="text-3xl font-bold text-primary mb-4">Często zadawane pytania</h2>
|
|
<p className="text-gray-600">
|
|
Odpowiedzi na najczęstsze wątpliwości naszych klientów.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{faqs.map((faq) => {
|
|
const isOpen = openId === faq.id;
|
|
return (
|
|
<div
|
|
key={faq.id}
|
|
className={cn(
|
|
"bg-white border rounded-xl overflow-hidden transition-all duration-200",
|
|
isOpen ? "border-accent shadow-md" : "border-gray-200 hover:border-gray-300"
|
|
)}
|
|
>
|
|
<button
|
|
className="w-full px-6 py-4 flex items-center justify-between text-left focus:outline-none"
|
|
onClick={() => setOpenId(isOpen ? null : faq.id)}
|
|
aria-expanded={isOpen}
|
|
>
|
|
<span className="font-semibold text-primary pr-4">{faq.question}</span>
|
|
<ChevronDown
|
|
className={cn(
|
|
"w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0",
|
|
isOpen && "rotate-180 text-accent"
|
|
)}
|
|
/>
|
|
</button>
|
|
|
|
<div
|
|
className={cn(
|
|
"px-6 text-gray-600 leading-relaxed overflow-hidden transition-all duration-300 ease-in-out",
|
|
isOpen ? "max-h-96 pb-5 opacity-100" : "max-h-0 pb-0 opacity-0"
|
|
)}
|
|
>
|
|
<div className="pt-2 border-t border-gray-100">
|
|
{faq.answer}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|