Ablative config

This commit is contained in:
2026-03-03 20:30:29 +00:00
parent 386f6fe928
commit 585e66ceb4
16 changed files with 713 additions and 71 deletions

View File

@@ -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}