68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from '@/components/ui/accordion'
|
|
|
|
interface FAQItem {
|
|
question: string
|
|
answer: string
|
|
}
|
|
|
|
export default function FAQ() {
|
|
const [faqs, setFaqs] = useState<FAQItem[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
async function fetchFAQ() {
|
|
try {
|
|
const response = await fetch('/api/faq')
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load FAQ')
|
|
}
|
|
const data = await response.json()
|
|
setFaqs(data)
|
|
} catch {
|
|
// If there's an error, just show no FAQs
|
|
setFaqs([])
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchFAQ()
|
|
}, [])
|
|
|
|
// Don't show anything if loading, error, or no FAQs
|
|
if (loading || faqs.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full max-w-md dark:bg-zinc-950 dark:border-zinc-800">
|
|
<CardHeader>
|
|
<CardTitle className="dark:text-white">Frequently Asked Questions</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Accordion type="single" collapsible className="w-full">
|
|
{faqs.map((faq, index) => (
|
|
<AccordionItem key={index} value={`item-${index}`} className="dark:border-zinc-800">
|
|
<AccordionTrigger className="dark:text-white">
|
|
{faq.question}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="dark:text-zinc-400">
|
|
{faq.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|