36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
// app/components/ui/FAQItem.tsx
|
|
|
|
import { ChevronDown, ChevronUp } from 'lucide-react';
|
|
|
|
interface FAQItemProps {
|
|
id: string;
|
|
question: string;
|
|
answer: string;
|
|
isOpen: boolean;
|
|
onToggle: (id: string) => void;
|
|
}
|
|
|
|
export function FAQItem({ id, question, answer, isOpen, onToggle }: FAQItemProps) {
|
|
return (
|
|
<div className={`rounded-xl overflow-hidden transition-colors ${isOpen ? 'bg-white/80 shadow-sm' : 'bg-white/40 hover:bg-white/60'}`}>
|
|
<button
|
|
className="w-full text-left p-3 flex justify-between items-center focus:outline-none"
|
|
onClick={() => onToggle(id)}
|
|
>
|
|
<span className="font-bold text-slate-teal text-sm pr-4 leading-snug">{question}</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>
|
|
|
|
{/* The CSS Grid accordion trick */}
|
|
<div className={`grid transition-all duration-300 ease-in-out ${isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'}`}>
|
|
<div className="overflow-hidden">
|
|
<div className="p-2 pb-3 text-ebony font-medium text-sm leading-relaxed border-t border-ebony/20 mx-4">
|
|
{answer}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |