39 lines
918 B
TypeScript
39 lines
918 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>
|
||
);
|
||
}
|