33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
import { useState } from 'react'
|
|
|
|
/**
|
|
* Collapsible section wrapper for engine design input groups.
|
|
*/
|
|
export default function DesignSection({ title, children, defaultOpen = true, headerAction }) {
|
|
const [open, setOpen] = useState(defaultOpen)
|
|
|
|
return (
|
|
<div className="border border-slate-700 rounded-lg overflow-hidden mb-4">
|
|
<div className="w-full flex items-center justify-between px-4 py-3 bg-slate-800 hover:bg-slate-700 text-left transition-colors group">
|
|
<button
|
|
onClick={() => setOpen(o => !o)}
|
|
className="flex items-center gap-2 flex-1"
|
|
>
|
|
<span className="text-sm font-semibold text-slate-200">{title}</span>
|
|
<span className="text-slate-400 text-xs select-none">{open ? '▲' : '▼'}</span>
|
|
</button>
|
|
{headerAction && (
|
|
<div className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
|
|
{headerAction}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{open && (
|
|
<div className="p-4 bg-slate-900 space-y-3">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|