14 lines
748 B
TypeScript
14 lines
748 B
TypeScript
'use client'
|
||
|
||
import { useState, type ReactNode } from 'react'
|
||
|
||
export default function SettingsRegion({ title, id, collapsed, children }: { title: string; id: string; collapsed: boolean; children: ReactNode }) {
|
||
const [open, setOpen] = useState(!collapsed)
|
||
return (
|
||
<section id={id} className={`admin-section admin-zone config-subsection ${open ? '' : 'is-collapsed'}`}>
|
||
{collapsed && <button type="button" className="config-region-toggle" aria-expanded={open} aria-controls={`${id}-content`} onClick={() => setOpen(!open)}><strong>{title}</strong><span>{open ? 'Hide' : 'Configure'} <b aria-hidden="true">{open ? '−' : '+'}</b></span></button>}
|
||
<div id={`${id}-content`} hidden={!open}>{children}</div>
|
||
</section>
|
||
)
|
||
}
|