116 lines
4.6 KiB
TypeScript
116 lines
4.6 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { getConfig, updateConfig, ApiError } from '../../../lib/api';
|
|
import type { SiteConfig } from '../../../lib/types';
|
|
|
|
export default function Settings() {
|
|
const [config, setConfig] = useState<Partial<SiteConfig>>({});
|
|
const [alert, setAlert] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
|
|
|
|
useEffect(() => {
|
|
getConfig()
|
|
.then(setConfig)
|
|
.catch(() => showAlert('Failed to load settings from server.', 'error'));
|
|
}, []);
|
|
|
|
function showAlert(msg: string, type: 'success' | 'error') {
|
|
setAlert({ msg, type });
|
|
setTimeout(() => setAlert(null), 5000);
|
|
}
|
|
|
|
function update(key: keyof SiteConfig, value: string) {
|
|
setConfig(prev => ({ ...prev, [key]: value }));
|
|
}
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
try {
|
|
await updateConfig(config);
|
|
showAlert('Settings saved. Refresh to see changes.', 'success');
|
|
} catch (e) {
|
|
showAlert(e instanceof ApiError ? `Error: ${e.message}` : 'Failed to save settings.', 'error');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-10">
|
|
{alert && (
|
|
<div
|
|
className={`p-4 text-sm font-display italic text-center border ${
|
|
alert.type === 'success'
|
|
? 'bg-[var(--green)]/15 text-[var(--green)] border-[var(--green)]/30'
|
|
: 'bg-[var(--red)]/15 text-[var(--red)] border-[var(--red)]/30'
|
|
}`}
|
|
style={{ borderRadius: 1 }}
|
|
>
|
|
{alert.msg}
|
|
</div>
|
|
)}
|
|
|
|
<section className="space-y-6">
|
|
<h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--mauve)] pl-4">Identity</h2>
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<Field label="Gallery name (nav)" value={config.title || ''} onChange={v => update('title', v)} />
|
|
<Field label="Nav subtitle" value={config.subtitle || ''} onChange={v => update('subtitle', v)} />
|
|
<Field label="Welcome title (index)" value={config.welcome_title || ''} onChange={v => update('welcome_title', v)} />
|
|
<Field label="Welcome subtitle" value={config.welcome_subtitle || ''} onChange={v => update('welcome_subtitle', v)} />
|
|
</div>
|
|
<Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="Icon shown in browser tabs." />
|
|
</section>
|
|
|
|
<section className="space-y-6">
|
|
<h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--blue)] pl-4">Appearance</h2>
|
|
<div>
|
|
<label className="field-label">Theme</label>
|
|
<select
|
|
value={config.theme || 'salon'}
|
|
onChange={e => update('theme', e.target.value)}
|
|
className="field-input font-display italic"
|
|
>
|
|
<option value="salon">Salon (parchment, default)</option>
|
|
<option value="salon-noir">Salon Noir (black gallery wall)</option>
|
|
<option value="latte">Latte (light)</option>
|
|
<option value="mocha">Mocha (dark)</option>
|
|
</select>
|
|
<p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Salon and Salon Noir are tuned for the gallery aesthetic.</p>
|
|
</div>
|
|
<div>
|
|
<label className="field-label">Custom CSS</label>
|
|
<textarea
|
|
value={config.custom_css || ''}
|
|
onChange={e => update('custom_css', e.target.value)}
|
|
rows={4}
|
|
className="field-input font-mono text-xs"
|
|
placeholder="body { ... }"
|
|
/>
|
|
<p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Injected globally — use sparingly.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-6">
|
|
<h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--teal)] pl-4">Footer</h2>
|
|
<Field label="Footer text" value={config.footer || ''} onChange={v => update('footer', v)} />
|
|
</section>
|
|
|
|
<button type="submit" className="btn-stamp">
|
|
Save site settings
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function Field({ label, value, onChange, hint }: { label: string; value: string; onChange: (v: string) => void; hint?: string }) {
|
|
return (
|
|
<div>
|
|
<label className="field-label">{label}</label>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={e => onChange(e.target.value)}
|
|
required
|
|
className="field-input"
|
|
/>
|
|
{hint && <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">{hint}</p>}
|
|
</div>
|
|
);
|
|
}
|