58 lines
No EOL
2.6 KiB
TypeScript
58 lines
No EOL
2.6 KiB
TypeScript
import { createSignal, Show } from 'solid-js';
|
|
import { FaSolidChevronDown } from 'solid-icons/fa';
|
|
import type { FaqItem, FaqProps } from '@/types/globalInterfaces';
|
|
|
|
const Faq = (props: FaqProps) => {
|
|
const [openIndex, setOpenIndex] = createSignal<number | null>(null);
|
|
|
|
const toggleAccordion = (index: number) => {
|
|
setOpenIndex(openIndex() === index ? null : index);
|
|
};
|
|
|
|
return (
|
|
<section class="bg-white py-20 md:py-28">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">
|
|
Häufig gestellte Fragen
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
|
|
Wir haben die Antworten auf die häufigsten Fragen zu unserem Service
|
|
hier für Sie zusammengestellt.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
{props.faqItems.map((item, index) => (
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
|
<button
|
|
type="button"
|
|
class="w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 text-left cursor-pointer"
|
|
onClick={() => toggleAccordion(index)}
|
|
>
|
|
<span class="font-medium text-gray-900 pr-4">{item.question}</span>
|
|
<FaSolidChevronDown
|
|
class={`flex-shrink-0 transform transition-transform duration-300 ${
|
|
openIndex() === index ? 'rotate-180 text-blue-600' : 'text-blue-600'
|
|
}`}
|
|
/>
|
|
</button>
|
|
|
|
<div
|
|
class={`transition-all duration-300 ease-in-out overflow-hidden ${
|
|
openIndex() === index ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
|
|
}`}
|
|
>
|
|
<div class="p-4 bg-white border-t border-gray-200">
|
|
<p class="text-gray-600">{item.answer}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Faq; |