Spaces:
Running
Running
| 'use client'; | |
| import '../i18n'; | |
| import { useState } from 'react'; | |
| import { useTranslation } from 'react-i18next'; | |
| export default function FAQ() { | |
| const { t } = useTranslation(); | |
| const faqs = t('faqs', { returnObjects: true }); | |
| const [openIndex, setOpenIndex] = useState(null); | |
| const toggle = (index) => { | |
| setOpenIndex(openIndex === index ? null : index); | |
| }; | |
| return ( | |
| <div className="max-w-5xl mx-auto px-6 py-3"> | |
| <h2 className="text-3xl font-bold text-center text-blue-700 border-b pb-4 mb-10"> | |
| {t('faq_title')} | |
| </h2> | |
| <div className="space-y-4"> | |
| {faqs.map((faq, i) => ( | |
| <div | |
| key={i} | |
| className="p-6 bg-white border border-gray-200 rounded-lg shadow-sm transition" | |
| > | |
| <button | |
| className="w-full text-left text-xl font-semibold text-gray-800 flex justify-between items-center" | |
| onClick={() => toggle(i)} | |
| > | |
| <span>{`${i + 1}. ${faq.question}`}</span> | |
| <span className="text-2xl text-gray-500"> | |
| {openIndex === i ? '▴' : '▾'} | |
| </span> | |
| </button> | |
| {openIndex === i && ( | |
| <p className="mt-4 text-gray-600 text-sm"> | |
| {faq.answer.split(/(<code>.*?<\/code>)/g).map((part, j) => | |
| part.startsWith('<code>') ? ( | |
| <code key={j}>{part.replace(/<\/?code>/g, '')}</code> | |
| ) : ( | |
| part | |
| ) | |
| )} | |
| </p> | |
| )} | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ); | |
| } | |