49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import type { ReactNode } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A switch rendered as a card — the panel's top-level on/off control.
|
||
|
|
*
|
||
|
|
* The markup used to be written out at every call site: fourteen copies of the
|
||
|
|
* same eighteen lines, differing only in the label and which setting they read
|
||
|
|
* (#533). Changing how a switch looked meant editing it fourteen times, and the
|
||
|
|
* copies had already drifted apart in their line wrapping. The class names are
|
||
|
|
* unchanged, so `admin.css` styles this exactly as it styled the copies.
|
||
|
|
*
|
||
|
|
* `SettingRow` is the lighter sibling for switches *inside* a group panel; this
|
||
|
|
* is the card that sits at the top level of a section.
|
||
|
|
*/
|
||
|
|
export default function ToggleCard({
|
||
|
|
icon,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
checked,
|
||
|
|
onToggle,
|
||
|
|
}: {
|
||
|
|
icon: ReactNode;
|
||
|
|
title: ReactNode;
|
||
|
|
description: ReactNode;
|
||
|
|
checked: boolean;
|
||
|
|
onToggle: () => void;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={`admin-toggle-card ${checked ? 'active' : ''}`}
|
||
|
|
onClick={onToggle}
|
||
|
|
aria-pressed={checked}
|
||
|
|
>
|
||
|
|
<div className="toggle-card-info">
|
||
|
|
<span className="toggle-card-title">
|
||
|
|
{icon} {title}
|
||
|
|
</span>
|
||
|
|
<span className="toggle-card-desc">{description}</span>
|
||
|
|
</div>
|
||
|
|
<div className={`switch-toggle ${checked ? 'on' : ''}`}>
|
||
|
|
<span className="switch-slider" />
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|