chore: standardize security and quality foundations
This commit is contained in:
@@ -1,13 +1,38 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import { useState, type ReactNode } from 'react'
|
||||
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)
|
||||
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 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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user