59 lines
3.3 KiB
TypeScript
59 lines
3.3 KiB
TypeScript
// src/pages/FAQ.tsx
|
|
|
|
import React, { useState } from 'react';
|
|
import faqData from '../data/faq.json';
|
|
import { ChevronDown, ChevronUp, MessageCircleQuestionMark } from 'lucide-react';
|
|
|
|
export const FAQ: React.FC = () => {
|
|
const [openIndex, setOpenIndex] = useState<string | null>(null);
|
|
|
|
const toggleQuestion = (index: string) => {
|
|
setOpenIndex(openIndex === index ? null : index);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full animate-fade-in">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
|
|
<MessageCircleQuestionMark className="mr-3 text-seafoam" size={32} />
|
|
Veckoschema
|
|
</h1>
|
|
<p className="text-moss font-medium mt-2 ml-11">Här hittar du när vi bemannar Kullaberg.</p>
|
|
</div>
|
|
|
|
<div className="columns-1 lg:columns-2 gap-6 space-y-6">
|
|
{faqData.map((section, sIndex) => (
|
|
<div key={sIndex} className="break-inside-avoid bg-white/40 backdrop-blur-md border border-white p-6 rounded-3xl shadow-lg shadow-ebony/5">
|
|
<h2 className="text-lg font-black text-ebony/70 uppercase tracking-widest mb-4">
|
|
{section.category}
|
|
</h2>
|
|
<div className="space-y-3">
|
|
{section.questions.map((item, qIndex) => {
|
|
const id = `${sIndex}-${qIndex}`;
|
|
const isOpen = openIndex === id;
|
|
return (
|
|
<div key={id} className={`rounded-2xl overflow-hidden transition-all duration-300 ${isOpen ? 'bg-white shadow-md shadow-seafoam/10' : 'bg-eggshell/50 hover:bg-white'}`}>
|
|
<button
|
|
className="w-full text-left p-4 flex justify-between items-center focus:outline-none"
|
|
onClick={() => toggleQuestion(id)}
|
|
>
|
|
<span className="font-bold text-slate-teal text-sm pr-4 leading-snug">{item.q}</span>
|
|
<div className={`p-1 rounded-full transition-colors ${isOpen ? 'bg-seafoam text-eggshell' : 'bg-transparent text-seafoam'}`}>
|
|
{isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
|
</div>
|
|
</button>
|
|
<div className={`transition-all duration-300 ease-in-out ${isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
|
|
<div className="p-4 pt-0 text-ebony font-medium text-sm leading-relaxed border-t border-ebony/5 mx-4 mt-2">
|
|
{item.a}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |