104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { api } from "@/lib/api";
|
|
import { Navbar } from "@/components/public/Navbar";
|
|
import { Footer } from "@/components/public/Footer";
|
|
import { FaqPageJsonLd } from "@/components/public/JsonLd";
|
|
|
|
interface FaqItem {
|
|
id: string;
|
|
question: string;
|
|
answer: string;
|
|
order: number;
|
|
showOnHomepage: boolean;
|
|
}
|
|
|
|
export default function FaqPage() {
|
|
const [items, setItems] = useState<FaqItem[]>([]);
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
api.getFaqsAll()
|
|
.then((data) => {
|
|
if (Array.isArray(data)) setItems(data);
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{items.length > 0 && (
|
|
<FaqPageJsonLd items={items.map((i) => ({ question: i.question, answer: i.answer }))} />
|
|
)}
|
|
<Navbar />
|
|
<div className="min-h-screen">
|
|
<div className="max-w-3xl mx-auto px-8 pt-16 pb-24">
|
|
<h1 className="text-4xl font-black mb-4">Frequently Asked Questions</h1>
|
|
<p className="text-on-surface-variant text-lg mb-12">
|
|
Everything you need to know about the Belgian Bitcoin Embassy.
|
|
</p>
|
|
|
|
{loading && (
|
|
<div className="space-y-4">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className="bg-surface-container-low rounded-xl h-[72px] animate-pulse" />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && items.length === 0 && (
|
|
<p className="text-on-surface-variant">No FAQs available yet.</p>
|
|
)}
|
|
|
|
{!loading && items.length > 0 && (
|
|
<div className="space-y-4">
|
|
{items.map((item, i) => {
|
|
const isOpen = openIndex === i;
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
className="bg-surface-container-low rounded-xl overflow-hidden"
|
|
>
|
|
<button
|
|
onClick={() => setOpenIndex(isOpen ? null : i)}
|
|
className="w-full flex items-center justify-between p-6 text-left"
|
|
>
|
|
<span className="text-lg font-bold pr-4">{item.question}</span>
|
|
<ChevronDown
|
|
size={20}
|
|
className={cn(
|
|
"shrink-0 text-primary transition-transform duration-200",
|
|
isOpen && "rotate-180"
|
|
)}
|
|
/>
|
|
</button>
|
|
|
|
<div
|
|
className={cn(
|
|
"grid transition-all duration-200",
|
|
isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
|
|
)}
|
|
>
|
|
<div className="overflow-hidden">
|
|
<p className="px-6 pb-6 text-on-surface-variant leading-relaxed">
|
|
{item.answer}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|