naturvardarna/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

UI improvments

Browse Source
This commit is contained in:
WilliamSoderberg
2026-03-17 14:58:08 +01:00 Verified
parent ff3c179565
commit e3baccbe86
21 changed files with 1068 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/faq/page.tsx
+26 -33
View File
@@ -2,9 +2,12 @@
"use client";
import React, { useState } from 'react';
import { MessageCircleQuestionMark } from 'lucide-react';
import { useState } from 'react';
import { FAQItem } from '../components/ui/FAQItem';
import { PageHeader } from '../components/ui/PageHeader';
import { SectionCard } from '../components/ui/SectionCard';
import faqData from '../data/faq.json';
import { ChevronDown, ChevronUp, MessageCircleQuestionMark } from 'lucide-react';
export default function FAQ() {
const [openIndex, setOpenIndex] = useState<string | null>(null);
@@ -15,47 +18,37 @@ export default function FAQ() {
return (
<div className="w-full animate-fade-in space-y-6">
<div>
<h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
<MessageCircleQuestionMark className="mr-3 text-seafoam" size={32} />
Vanliga Frågor (FAQ)
</h1>
<p className="text-moss font-medium mt-2 ml-11">Använd den här guiden för att snabbt svara på turisternas vanligaste frågor.</p>
</div>
<PageHeader
title="Vanliga Frågor (FAQ)"
icon={MessageCircleQuestionMark}
description="Använd den här guiden för att snabbt svara på turisternas vanligaste frågor."
/>
<div className="columns-1 lg:columns-2 gap-4 space-y-4">
<div className="columns-1 lg:columns-2 gap-4">
{faqData.map((section, sIndex) => (
<div key={sIndex} className="break-inside-avoid bg-eggshell border-2 border-slate-teal/10 p-5 rounded-2xl shadow-sm">
<h2 className="text-sm font-black text-ebony/60 uppercase tracking-widest mb-4">
{section.category}
</h2>
<SectionCard
key={sIndex}
title={section.category}
className="break-inside-avoid mb-4 inline-block w-full"
>
<div className="space-y-2">
{section.questions.map((item, qIndex) => {
const id = `${sIndex}-${qIndex}`;
const isOpen = openIndex === id;
return (
<div key={id} className={`rounded-xl overflow-hidden transition-colors ${isOpen ? 'bg-white shadow-sm' : 'bg-transparent hover:bg-white/50'}`}>
<button
className="w-full text-left p-3 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' : 'text-seafoam'}`}>
{isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
</div>
</button>
<div className={`transition-all duration-300 ease-in-out ${isOpen ? 'max-h-125 opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
<div className="p-2 pb-3 text-ebony font-medium text-sm leading-relaxed border-t border-ebony/20 mx-4">
{item.a}
</div>
</div>
</div>
<FAQItem
key={id}
id={id}
question={item.q}
answer={item.a}
isOpen={openIndex === id}
onToggle={toggleQuestion}
/>
);
})}
</div>
</div>
</SectionCard>
))}
</div>
</div>
);
};
}