`components/CollapsibleSection.tsx`

40 lines
'use client'

interface Props {
  title: string
  icon: string
  isExpanded: boolean
  onToggle: () => void
  children: React.ReactNode
}

export default function CollapsibleSection({ title, icon, isExpanded, onToggle, children }: Props) {
  return (
    <div className="card overflow-hidden">
      <div
        className="flex items-center justify-between p-4 cursor-pointer hover:bg-[var(--surface-alt)] transition-colors"
        onClick={onToggle}
      >
        <div className="flex items-center gap-3">
          <span className="text-xl">{icon}</span>
          <h3 className="font-medium">{title}</h3>
        </div>
        <svg
          className={`w-5 h-5 text-[var(--foreground-secondary)] transition-transform ${isExpanded ? 'rotate-180' : ''}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </div>

      {isExpanded && (
        <div className="px-4 pb-4 pt-2 border-t border-[var(--border)]">
          {children}
        </div>
      )}
    </div>
  )
}