47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import type { ReactNode } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Lightbox zoom for one page or album (#467): inherit, on, or off.
|
||
|
|
*
|
||
|
|
* Three states rather than a switch, because `zoom: false` is a setting of its
|
||
|
|
* own — it switches zoom off here while the site (or the page) has it on —
|
||
|
|
* and a switch can only say true or absent. A select, like the layout
|
||
|
|
* override beside it, with inheriting as the empty value, so the YAML keeps no
|
||
|
|
* key until someone picks one.
|
||
|
|
*/
|
||
|
|
export default function ZoomOverrideField({
|
||
|
|
id,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
inheritLabel,
|
||
|
|
hint,
|
||
|
|
}: {
|
||
|
|
id: string;
|
||
|
|
value: boolean | undefined;
|
||
|
|
onChange: (value: boolean | undefined) => void;
|
||
|
|
inheritLabel: string;
|
||
|
|
hint: ReactNode;
|
||
|
|
}) {
|
||
|
|
const current = value === true ? 'on' : value === false ? 'off' : '';
|
||
|
|
return (
|
||
|
|
<div className="admin-field">
|
||
|
|
<label htmlFor={id}>Photo zoom</label>
|
||
|
|
<select
|
||
|
|
id={id}
|
||
|
|
value={current}
|
||
|
|
onChange={(e) => {
|
||
|
|
const next = e.target.value;
|
||
|
|
onChange(next === 'on' ? true : next === 'off' ? false : undefined);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<option value="">{inheritLabel}</option>
|
||
|
|
<option value="on">On — visitors can zoom to full resolution</option>
|
||
|
|
<option value="off">Off</option>
|
||
|
|
</select>
|
||
|
|
<span className="admin-field-hint">{hint}</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|