41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode } from 'react';
|
|
import { ChevronDown, ChevronUp } from 'lucide-react';
|
|
|
|
interface AccordionProps {
|
|
title: string;
|
|
icon: ReactNode;
|
|
children: ReactNode;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
export function Accordion({ title, icon, children, isOpen, onToggle }: AccordionProps) {
|
|
return (
|
|
<div className="border border-charcoal-outline rounded-lg overflow-hidden bg-iron-gray/30">
|
|
<button
|
|
onClick={onToggle}
|
|
className="w-full flex items-center justify-between px-3 py-2 hover:bg-iron-gray/50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{icon}
|
|
<span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
|
|
{title}
|
|
</span>
|
|
</div>
|
|
{isOpen ? (
|
|
<ChevronDown className="w-4 h-4 text-gray-400" />
|
|
) : (
|
|
<ChevronUp className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="p-3 border-t border-charcoal-outline">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |