added contact page
This commit is contained in:
@@ -1,6 +1,15 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getConfig, updateConfig, ApiError } from '../../../lib/api';
|
||||
import type { SiteConfig } from '../../../lib/types';
|
||||
import type { SiteConfig, ContactLink } from '../../../lib/types';
|
||||
|
||||
const CONTACT_KINDS: { value: string; label: string; placeholder: string }[] = [
|
||||
{ value: 'email', label: 'Email', placeholder: 'you@example.com' },
|
||||
{ value: 'mastodon', label: 'Mastodon', placeholder: 'https://mastodon.social/@you' },
|
||||
{ value: 'bluesky', label: 'Bluesky', placeholder: 'https://bsky.app/profile/you.bsky.social' },
|
||||
{ value: 'github', label: 'GitHub', placeholder: 'https://github.com/you' },
|
||||
{ value: 'instagram', label: 'Instagram', placeholder: 'https://instagram.com/you' },
|
||||
{ value: 'url', label: 'Other link', placeholder: 'https://…' },
|
||||
];
|
||||
|
||||
export default function Settings() {
|
||||
const [config, setConfig] = useState<Partial<SiteConfig>>({});
|
||||
@@ -17,10 +26,30 @@ export default function Settings() {
|
||||
setTimeout(() => setAlert(null), 5000);
|
||||
}
|
||||
|
||||
function update(key: keyof SiteConfig, value: string) {
|
||||
function update<K extends keyof SiteConfig>(key: K, value: SiteConfig[K]) {
|
||||
setConfig(prev => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
const contactLinks: ContactLink[] = config.contact_links ?? [];
|
||||
|
||||
function updateContactLink(index: number, patch: Partial<ContactLink>) {
|
||||
const next = contactLinks.map((row, i) => (i === index ? { ...row, ...patch } : row));
|
||||
update('contact_links', next);
|
||||
}
|
||||
function addContactLink() {
|
||||
update('contact_links', [...contactLinks, { kind: 'email', label: 'Email', value: '' }]);
|
||||
}
|
||||
function removeContactLink(index: number) {
|
||||
update('contact_links', contactLinks.filter((_, i) => i !== index));
|
||||
}
|
||||
function moveContactLink(index: number, dir: -1 | 1) {
|
||||
const target = index + dir;
|
||||
if (target < 0 || target >= contactLinks.length) return;
|
||||
const next = [...contactLinks];
|
||||
[next[index], next[target]] = [next[target], next[index]];
|
||||
update('contact_links', next);
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.SyntheticEvent) {
|
||||
e.preventDefault();
|
||||
try {
|
||||
@@ -85,6 +114,101 @@ export default function Settings() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--peach)] pl-4">Contact</h2>
|
||||
<div>
|
||||
<label className="field-label">Intro text (shown above links)</label>
|
||||
<textarea
|
||||
value={config.contact_intro || ''}
|
||||
onChange={e => update('contact_intro', e.target.value)}
|
||||
rows={3}
|
||||
className="field-input"
|
||||
placeholder="A short note for visitors who want to reach out."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="field-label">Contact links</label>
|
||||
{contactLinks.length === 0 && (
|
||||
<p className="text-[11px] font-display italic text-[var(--subtext0)] tracking-wider">
|
||||
No links yet. Add one below to populate the contact page.
|
||||
</p>
|
||||
)}
|
||||
{contactLinks.map((row, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="grid md:grid-cols-[160px_1fr_1fr_auto] gap-3 items-end p-3 border border-[var(--surface2)]/60"
|
||||
style={{ borderRadius: 1 }}
|
||||
>
|
||||
<div>
|
||||
<label className="field-label">Kind</label>
|
||||
<select
|
||||
value={row.kind}
|
||||
onChange={e => updateContactLink(i, { kind: e.target.value })}
|
||||
className="field-input font-display italic"
|
||||
>
|
||||
{CONTACT_KINDS.map(k => (
|
||||
<option key={k.value} value={k.value}>{k.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Label</label>
|
||||
<input
|
||||
type="text"
|
||||
value={row.label}
|
||||
onChange={e => updateContactLink(i, { label: e.target.value })}
|
||||
className="field-input"
|
||||
placeholder="Displayed name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">{row.kind === 'email' ? 'Address' : 'URL'}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={row.value}
|
||||
onChange={e => updateContactLink(i, { value: e.target.value })}
|
||||
className="field-input"
|
||||
placeholder={CONTACT_KINDS.find(k => k.value === row.kind)?.placeholder ?? ''}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1 items-center pb-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveContactLink(i, -1)}
|
||||
disabled={i === 0}
|
||||
className="chip disabled:opacity-30"
|
||||
aria-label="Move up"
|
||||
title="Move up"
|
||||
>↑</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveContactLink(i, 1)}
|
||||
disabled={i === contactLinks.length - 1}
|
||||
className="chip disabled:opacity-30"
|
||||
aria-label="Move down"
|
||||
title="Move down"
|
||||
>↓</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeContactLink(i)}
|
||||
className="chip text-[var(--red)]"
|
||||
aria-label="Remove link"
|
||||
title="Remove"
|
||||
>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addContactLink}
|
||||
className="chip chip-accent uppercase"
|
||||
>
|
||||
+ Add contact link
|
||||
</button>
|
||||
</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)} />
|
||||
|
||||
Reference in New Issue
Block a user