release: v0.14.0
Fourteen commits since v0.13.0. See CHANGELOG.md for the full list. Two additions: `npm run doctor`, which runs the config doctor from a terminal — including inside the shipped image — and exits with the worst finding, so it can gate a deployment script; and a Playwright spec that loads all fourteen admin routes against a production build. One change, invisible on screen: the admin panel got a form-field layer (#533). Five fixes: grid.gap on both axes (#513), the dashboard status badge (#539), the journal editor's unsaved-changes guard (#538), essay paragraph markup (#537), and aria-pressed on the panel's switches and pickers.
This commit is contained in:
48
app/admin/components/fields/ToggleCard.tsx
Normal file
48
app/admin/components/fields/ToggleCard.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user