release: v0.20.0

app/admin/components/fields/ZoomOverrideField.tsx

@@ -0,0 +1,46 @@
+'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>
+  );
+}