prod setup

src/components/admin/fields/ToggleField.tsx

@@ -0,0 +1,53 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { FieldError } from './FieldError';
+
+type Props = {
+  name: string;
+  label: string;
+  hint?: string;
+};
+
+export function ToggleField({ name, label, hint }: Props) {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => {
+        const on = !!field.value;
+        return (
+          <div>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={on}
+              onClick={() => field.onChange(!on)}
+              className={`flex items-center gap-3 px-3 py-2 rounded border bg-[color:var(--color-surface-2)] transition-colors ${
+                on
+                  ? 'border-[color:var(--color-acid)] text-[color:var(--color-acid)]'
+                  : 'border-[color:var(--color-border)] text-[color:var(--color-text-muted)]'
+              }`}
+            >
+              <span
+                className={`led ${on ? 'led-acid animate-led-green' : ''}`}
+                style={!on ? { background: 'var(--color-text-dim)', boxShadow: 'none' } : undefined}
+              />
+              <span className="font-mono text-xs uppercase tracking-widest">
+                {label}
+              </span>
+              <span className="ml-auto font-mono text-[10px] opacity-70">
+                {on ? 'ON' : 'OFF'}
+              </span>
+            </button>
+            {hint && (
+              <span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mt-1">
+                {hint}
+              </span>
+            )}
+            <FieldError name={name} />
+          </div>
+        );
+      }}
+    />
+  );
+}