Ablative config
This commit is contained in:
@@ -3,18 +3,25 @@ import { useState } from 'react'
|
||||
/**
|
||||
* Collapsible section wrapper for engine design input groups.
|
||||
*/
|
||||
export default function DesignSection({ title, children, defaultOpen = true }) {
|
||||
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">
|
||||
<button
|
||||
onClick={() => setOpen(o => !o)}
|
||||
className="w-full flex items-center justify-between px-4 py-3 bg-slate-800 hover:bg-slate-700 text-left transition-colors"
|
||||
>
|
||||
<span className="text-sm font-semibold text-slate-200">{title}</span>
|
||||
<span className="text-slate-400 text-xs select-none">{open ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
<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}
|
||||
|
||||
Reference in New Issue
Block a user