CollapsibleSection.tsx•1.24 kB
'use client';
import { useState } from 'react';
interface CollapsibleSectionProps {
title: string;
children: React.ReactNode;
}
export default function CollapsibleSection({ title, children }: CollapsibleSectionProps) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="mb-4 border border-nix-light rounded-lg overflow-hidden">
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full text-left px-4 py-3 bg-nix-light bg-opacity-20 flex justify-between items-center hover:bg-opacity-30 transition-colors duration-200"
>
<h5 className="text-md font-semibold text-nix-primary flex items-center">
{title}
</h5>
<svg
className={`w-5 h-5 text-nix-primary transform transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
{isOpen && <div className="p-4">{children}</div>}
</div>
);
}