Merge branch 'main' into rte-posts-upgrade
This commit is contained in:
581
client/src/routes/admin/views/HeroEditor.jsx
Normal file
581
client/src/routes/admin/views/HeroEditor.jsx
Normal file
@@ -0,0 +1,581 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import HeroElement from '../../../components/HeroElement.jsx'
|
||||
import { Loading, ErrorState } from '../../../components/PageState.jsx'
|
||||
import { api } from '../../../api/client.js'
|
||||
import { defaultLayout, parseLayout, heroBackground } from '../../../lib/heroLayout.js'
|
||||
|
||||
const POS_Y = ['top', 'center', 'bottom']
|
||||
const POS_X = ['left', 'center', 'right']
|
||||
|
||||
const clamp = (v, min, max) => Math.max(min, Math.min(max, v))
|
||||
const round2 = (v) => Math.round(v * 100) / 100
|
||||
const genId = () => (crypto.randomUUID ? crypto.randomUUID() : `el-${Date.now()}-${Math.random()}`)
|
||||
const hexOf = (v) => (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v || '') ? v : '#ffffff')
|
||||
|
||||
function newElement(type, z) {
|
||||
const base = { id: genId(), type, x: 50, y: 50, z, anchor: 'center' }
|
||||
if (type === 'text_block') {
|
||||
return { ...base, props: { align: 'center', width: 600, lines: [{ text: 'New heading', tag: 'h2', fontSize: 36, color: '#ffffff', weight: 600 }] } }
|
||||
}
|
||||
if (type === 'buttons') {
|
||||
return { ...base, y: 60, props: { align: 'center', gap: 12, items: [{ label: 'Button', to: '/', variant: 'primary' }] } }
|
||||
}
|
||||
if (type === 'moon') return { ...base, props: { size: 96, glow: 0.5 } }
|
||||
if (type === 'badge') return { ...base, props: { text: 'New badge', bgColor: '#1a2d4a', textColor: '#c2d2e6', borderRadius: 999 } }
|
||||
if (type === 'image') return { ...base, props: { src: '', width: 40, alt: '' } }
|
||||
return base
|
||||
}
|
||||
|
||||
const RESIZABLE = { text_block: 'width', image: 'width', moon: 'size' }
|
||||
|
||||
export default function HeroEditor() {
|
||||
const [layout, setLayout] = useState(null)
|
||||
const [live, setLive] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [status, setStatus] = useState('')
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState(null)
|
||||
const [snap, setSnap] = useState(false)
|
||||
const [scale, setScale] = useState(1)
|
||||
const teaserRef = useRef('')
|
||||
const skipSave = useRef(true)
|
||||
const canvasRef = useRef(null) // the 1280x720 stage (scaled to fit)
|
||||
const colRef = useRef(null) // measures available width
|
||||
|
||||
// Render the canvas as a scaled 1280x720 stage so it's a faithful miniature of
|
||||
// the live hero (viewport-unit fonts + % positions all scale together).
|
||||
useEffect(() => {
|
||||
const el = colRef.current
|
||||
if (!el) return
|
||||
const recompute = () => setScale(Math.min(el.clientWidth / 1280, (window.innerHeight * 0.66) / 720))
|
||||
recompute()
|
||||
const ro = new ResizeObserver(recompute)
|
||||
ro.observe(el)
|
||||
window.addEventListener('resize', recompute)
|
||||
return () => {
|
||||
ro.disconnect()
|
||||
window.removeEventListener('resize', recompute)
|
||||
}
|
||||
}, [loading])
|
||||
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
api.admin
|
||||
.getSettings()
|
||||
.then((s) => {
|
||||
if (!active) return
|
||||
teaserRef.current = s.homepage_teaser || ''
|
||||
const liveL = parseLayout(s.hero_layout)
|
||||
setLive(liveL)
|
||||
skipSave.current = true
|
||||
setLayout(parseLayout(s.hero_layout_draft) || liveL || defaultLayout(teaserRef.current))
|
||||
})
|
||||
.catch(() => active && setError('Could not load hero settings.'))
|
||||
.finally(() => active && setLoading(false))
|
||||
return () => {
|
||||
active = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!layout) return
|
||||
if (skipSave.current) {
|
||||
skipSave.current = false
|
||||
return
|
||||
}
|
||||
setStatus('Saving…')
|
||||
const t = setTimeout(() => {
|
||||
api.admin
|
||||
.updateSettings({ hero_layout_draft: JSON.stringify(layout) })
|
||||
.then(() => setStatus('Draft saved'))
|
||||
.catch(() => setStatus('Save failed'))
|
||||
}, 800)
|
||||
return () => clearTimeout(t)
|
||||
}, [layout])
|
||||
|
||||
// Delete key removes the selected element (unless typing in a field).
|
||||
useEffect(() => {
|
||||
if (!selectedId) return
|
||||
const onKey = (e) => {
|
||||
if (e.key !== 'Delete' && e.key !== 'Backspace') return
|
||||
if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return
|
||||
e.preventDefault()
|
||||
setLayout((l) => ({ ...l, elements: l.elements.filter((el) => el.id !== selectedId) }))
|
||||
setSelectedId(null)
|
||||
}
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [selectedId])
|
||||
|
||||
if (loading) return <Loading />
|
||||
if (error) return <ErrorState message={error} />
|
||||
if (!layout) return null
|
||||
|
||||
const bg = layout.background || {}
|
||||
const overlay = layout.overlay?.opacity ?? 0.72
|
||||
const elements = [...layout.elements].sort((a, b) => (a.z || 0) - (b.z || 0))
|
||||
const selected = layout.elements.find((e) => e.id === selectedId) || null
|
||||
|
||||
const patchBg = (patch) => setLayout((l) => ({ ...l, background: { ...l.background, ...patch } }))
|
||||
const setOpacity = (opacity) => setLayout((l) => ({ ...l, overlay: { ...l.overlay, opacity } }))
|
||||
const updateElement = (id, patch) =>
|
||||
setLayout((l) => ({ ...l, elements: l.elements.map((e) => (e.id === id ? { ...e, ...patch } : e)) }))
|
||||
const updateProps = (id, patch) =>
|
||||
setLayout((l) => ({ ...l, elements: l.elements.map((e) => (e.id === id ? { ...e, props: { ...e.props, ...patch } } : e)) }))
|
||||
const removeElement = (id) => {
|
||||
setLayout((l) => ({ ...l, elements: l.elements.filter((e) => e.id !== id) }))
|
||||
setSelectedId(null)
|
||||
}
|
||||
const bumpZ = (id, dir) =>
|
||||
setLayout((l) => ({ ...l, elements: l.elements.map((e) => (e.id === id ? { ...e, z: Math.max(0, (e.z || 0) + dir) } : e)) }))
|
||||
const addElement = (type) => {
|
||||
const z = Math.max(0, ...layout.elements.map((e) => e.z || 0)) + 1
|
||||
const el = newElement(type, z)
|
||||
setLayout((l) => ({ ...l, elements: [...l.elements, el] }))
|
||||
setSelectedId(el.id)
|
||||
}
|
||||
|
||||
function onElPointerDown(e, el) {
|
||||
if (e.button !== 0) return
|
||||
e.stopPropagation()
|
||||
setSelectedId(el.id)
|
||||
const rect = canvasRef.current.getBoundingClientRect()
|
||||
const sx = e.clientX
|
||||
const sy = e.clientY
|
||||
const ox = el.x
|
||||
const oy = el.y
|
||||
const node = e.currentTarget
|
||||
try {
|
||||
node.setPointerCapture(e.pointerId)
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
const stepX = (8 / 1280) * 100 // 8px snap on the 1280x720 stage, as %
|
||||
const stepY = (8 / 720) * 100
|
||||
const move = (ev) => {
|
||||
let nx = clamp(ox + ((ev.clientX - sx) / rect.width) * 100, 0, 100)
|
||||
let ny = clamp(oy + ((ev.clientY - sy) / rect.height) * 100, 0, 100)
|
||||
if (snap) {
|
||||
nx = Math.round(nx / stepX) * stepX
|
||||
ny = Math.round(ny / stepY) * stepY
|
||||
}
|
||||
updateElement(el.id, { x: round2(nx), y: round2(ny) })
|
||||
}
|
||||
const up = () => {
|
||||
node.removeEventListener('pointermove', move)
|
||||
node.removeEventListener('pointerup', up)
|
||||
}
|
||||
node.addEventListener('pointermove', move)
|
||||
node.addEventListener('pointerup', up)
|
||||
}
|
||||
|
||||
// Corner-handle resize: adjusts the type-appropriate dimension.
|
||||
function onResizePointerDown(e, el) {
|
||||
if (e.button !== 0) return
|
||||
e.stopPropagation()
|
||||
const dim = RESIZABLE[el.type]
|
||||
if (!dim) return
|
||||
const rect = canvasRef.current.getBoundingClientRect()
|
||||
const sx = e.clientX
|
||||
const orig = el.props?.[dim] ?? (dim === 'width' && el.type === 'image' ? 40 : dim === 'width' ? 600 : 64)
|
||||
const node = e.currentTarget
|
||||
try {
|
||||
node.setPointerCapture(e.pointerId)
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
const move = (ev) => {
|
||||
const dxPx = ev.clientX - sx
|
||||
const dxLogical = dxPx / scale // client px → stage px
|
||||
let val
|
||||
if (el.type === 'image') val = clamp(orig + (dxPx / rect.width) * 100, 5, 100) // %
|
||||
else if (el.type === 'moon') val = clamp(orig + dxLogical, 24, 400) // px
|
||||
else val = clamp(orig + dxLogical, 120, 1180) // text_block box px
|
||||
updateProps(el.id, { [dim]: Math.round(val) })
|
||||
}
|
||||
const up = () => {
|
||||
node.removeEventListener('pointermove', move)
|
||||
node.removeEventListener('pointerup', up)
|
||||
}
|
||||
node.addEventListener('pointermove', move)
|
||||
node.addEventListener('pointerup', up)
|
||||
}
|
||||
|
||||
async function onUploadBg(e) {
|
||||
const file = e.target.files?.[0]
|
||||
e.target.value = ''
|
||||
if (!file) return
|
||||
if (file.size > 1024 * 1024 && !confirm('This image is over 1 MB and may slow the page. Upload anyway?')) return
|
||||
setUploading(true)
|
||||
try {
|
||||
const { url } = await api.admin.upload(file)
|
||||
patchBg({ image_url: url })
|
||||
} catch (err) {
|
||||
setStatus(err.message || 'Upload failed')
|
||||
} finally {
|
||||
setUploading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function preview() {
|
||||
await api.admin.updateSettings({ hero_layout_draft: JSON.stringify(layout) }).catch(() => {})
|
||||
window.open('/?preview=1', '_blank', 'noopener')
|
||||
}
|
||||
async function publish() {
|
||||
const json = JSON.stringify(layout)
|
||||
try {
|
||||
await api.admin.updateSettings({ hero_layout: json, hero_layout_draft: json })
|
||||
setLive(layout)
|
||||
setStatus('Published ✓')
|
||||
} catch (err) {
|
||||
setStatus(err.message || 'Publish failed')
|
||||
}
|
||||
}
|
||||
async function revert() {
|
||||
if (!confirm('Discard draft changes and revert to the live hero?')) return
|
||||
skipSave.current = true
|
||||
setSelectedId(null)
|
||||
setLayout(live || defaultLayout(teaserRef.current))
|
||||
await api.admin.updateSettings({ hero_layout_draft: live ? JSON.stringify(live) : '' }).catch(() => {})
|
||||
setStatus('Reverted to live')
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, marginBottom: 16 }}>
|
||||
<p className="sans muted" style={{ margin: 0, fontSize: '0.9rem' }}>
|
||||
Compose the portal hero. {status && <span style={{ color: 'var(--accent)' }}>· {status}</span>}
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<button onClick={revert} className="pill">Revert to live</button>
|
||||
<button onClick={preview} className="pill">Preview ↗</button>
|
||||
<button onClick={publish} className="btn btn-primary btn-sq">Publish</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Element tray */}
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<span className="field-label" style={{ margin: 0 }}>Add:</span>
|
||||
<button onClick={() => addElement('text_block')} className="pill">+ Text</button>
|
||||
<button onClick={() => addElement('buttons')} className="pill">+ Buttons</button>
|
||||
<button onClick={() => addElement('moon')} className="pill">+ Moon</button>
|
||||
<button onClick={() => addElement('badge')} className="pill">+ Badge</button>
|
||||
<button onClick={() => addElement('image')} className="pill">+ Image</button>
|
||||
<button
|
||||
onClick={() => setSnap((v) => !v)}
|
||||
className="pill"
|
||||
style={{ marginLeft: 'auto', borderColor: snap ? 'var(--accent)' : 'var(--line)', color: snap ? 'var(--accent)' : 'var(--muted)' }}
|
||||
>
|
||||
Snap grid: {snap ? 'on' : 'off'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', flexWrap: 'wrap' }}>
|
||||
<div ref={colRef} style={{ flex: '1 1 620px', minWidth: 320 }}>
|
||||
<div style={{ position: 'relative', width: 1280 * scale, height: 720 * scale, maxWidth: '100%', borderRadius: 10, overflow: 'hidden', border: '1px solid var(--line)', background: 'var(--bg-deep)' }}>
|
||||
<div
|
||||
ref={canvasRef}
|
||||
onPointerDown={(e) => {
|
||||
if (e.target === e.currentTarget) setSelectedId(null)
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 1280,
|
||||
height: 720,
|
||||
transformOrigin: 'top left',
|
||||
transform: `scale(${scale})`,
|
||||
...heroBackground(layout),
|
||||
}}
|
||||
>
|
||||
{snap && (
|
||||
<div className="hero-canvas-grid" style={{ position: 'absolute', inset: 0, backgroundSize: '16px 16px', pointerEvents: 'none', zIndex: 0 }} />
|
||||
)}
|
||||
{elements.map((el) => (
|
||||
<HeroElement
|
||||
key={el.id}
|
||||
element={el}
|
||||
editor
|
||||
selected={el.id === selectedId}
|
||||
onPointerDown={(e) => onElPointerDown(e, el)}
|
||||
>
|
||||
{el.id === selectedId && RESIZABLE[el.type] && (
|
||||
<div
|
||||
onPointerDown={(e) => onResizePointerDown(e, el)}
|
||||
title="Resize"
|
||||
style={{ position: 'absolute', right: -6, bottom: -6, width: 14, height: 14, borderRadius: 3, background: 'var(--accent)', border: '1px solid var(--bg-deep)', cursor: 'nwse-resize', pointerEvents: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</HeroElement>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="sans dim" style={{ fontSize: '0.76rem', marginTop: 8 }}>
|
||||
Click to select · drag to move · Delete key removes the selected element.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<aside className="panel-flat" style={{ flex: '0 0 320px', padding: 18, display: 'flex', flexDirection: 'column', gap: 16, position: 'sticky', top: 20 }}>
|
||||
{selected ? (
|
||||
<ElementPanel
|
||||
key={selected.id}
|
||||
element={selected}
|
||||
onProps={(patch) => updateProps(selected.id, patch)}
|
||||
onRemove={() => removeElement(selected.id)}
|
||||
onForward={() => bumpZ(selected.id, 1)}
|
||||
onBack={() => bumpZ(selected.id, -1)}
|
||||
onDeselect={() => setSelectedId(null)}
|
||||
/>
|
||||
) : (
|
||||
<BackgroundPanel bg={bg} overlay={overlay} uploading={uploading} onUpload={onUploadBg} patchBg={patchBg} setOpacity={setOpacity} />
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Background / overlay panel (no element selected) ────────────────────
|
||||
function BackgroundPanel({ bg, overlay, uploading, onUpload, patchBg, setOpacity }) {
|
||||
return (
|
||||
<>
|
||||
<p className="field-label" style={{ margin: 0 }}>Background & overlay</p>
|
||||
<div>
|
||||
<span className="field-label">Background image</span>
|
||||
{bg.image_url ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<img src={bg.image_url} alt="" style={{ width: 70, height: 44, objectFit: 'cover', borderRadius: 6, border: '1px solid var(--line)' }} />
|
||||
<button onClick={() => patchBg({ image_url: null })} className="pill" style={{ fontSize: '0.8rem' }}>Clear</button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="sans dim" style={{ margin: '0 0 8px', fontSize: '0.8rem' }}>Using the default hero image.</p>
|
||||
)}
|
||||
<label className="btn btn-ghost btn-sq" style={{ display: 'inline-block', marginTop: 10, cursor: 'pointer' }}>
|
||||
{uploading ? 'Uploading…' : 'Upload image'}
|
||||
<input type="file" accept="image/*" onChange={onUpload} hidden disabled={uploading} />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<span className="field-label">Background position</span>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, maxWidth: 132 }}>
|
||||
{POS_Y.map((py) =>
|
||||
POS_X.map((px) => {
|
||||
const activePos = (bg.position_x || 'left') === px && (bg.position_y || 'center') === py
|
||||
return (
|
||||
<button
|
||||
key={`${px}-${py}`}
|
||||
title={`${py} ${px}`}
|
||||
onClick={() => patchBg({ position_x: px, position_y: py })}
|
||||
style={{ height: 36, borderRadius: 6, cursor: 'pointer', border: `1px solid ${activePos ? 'var(--accent)' : 'var(--line)'}`, background: activePos ? 'var(--blue)' : 'transparent' }}
|
||||
/>
|
||||
)
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="field-label">Overlay darkness — {Math.round(overlay * 100)}%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value={overlay} onChange={(e) => setOpacity(Number(e.target.value))} style={{ width: '100%' }} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Per-element properties ──────────────────────────────────────────────
|
||||
function ElementPanel({ element, onProps, onRemove, onForward, onBack, onDeselect }) {
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<p className="field-label" style={{ margin: 0 }}>{element.type.replace('_', ' ')}</p>
|
||||
<span className="link-accent" style={{ fontSize: '0.8rem' }} onClick={onDeselect}>Done</span>
|
||||
</div>
|
||||
|
||||
{element.type === 'text_block' && <TextBlockPanel element={element} onProps={onProps} />}
|
||||
{element.type === 'buttons' && <ButtonsPanel element={element} onProps={onProps} />}
|
||||
{element.type === 'moon' && <MoonPanel element={element} onProps={onProps} />}
|
||||
{element.type === 'badge' && <BadgePanel element={element} onProps={onProps} />}
|
||||
{element.type === 'image' && <ImagePanel element={element} onProps={onProps} />}
|
||||
|
||||
<div style={{ display: 'flex', gap: 8, borderTop: '1px solid var(--line)', paddingTop: 12 }}>
|
||||
<button onClick={onBack} className="pill" style={{ fontSize: '0.8rem' }}>Send back</button>
|
||||
<button onClick={onForward} className="pill" style={{ fontSize: '0.8rem' }}>Bring forward</button>
|
||||
<button onClick={onRemove} className="pill" style={{ marginLeft: 'auto', fontSize: '0.8rem', color: '#d98b84', borderColor: '#6e3b38' }}>Delete</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ALIGNS = ['left', 'center', 'right']
|
||||
|
||||
function AlignField({ value, onChange }) {
|
||||
return (
|
||||
<label>
|
||||
<span className="field-label">Align</span>
|
||||
<select className="input" value={value || 'center'} onChange={(e) => onChange(e.target.value)}>
|
||||
{ALIGNS.map((a) => (
|
||||
<option key={a} value={a}>{a}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
function TextBlockPanel({ element, onProps }) {
|
||||
const lines = element.props?.lines || []
|
||||
const setLine = (i, patch) => onProps({ lines: lines.map((l, idx) => (idx === i ? { ...l, ...patch } : l)) })
|
||||
const addLine = () => onProps({ lines: [...lines, { text: 'New line', tag: 'p', fontSize: 18, color: '#dbe2ea', weight: 400 }] })
|
||||
const removeLine = (i) => onProps({ lines: lines.filter((_, idx) => idx !== i) })
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<AlignField value={element.props?.align} onChange={(v) => onProps({ align: v })} />
|
||||
{lines.map((line, i) => (
|
||||
<div key={i} style={{ border: '1px solid var(--line-soft)', borderRadius: 8, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<input className="input" value={line.text} onChange={(e) => setLine(i, { text: e.target.value })} placeholder="Text" />
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<select className="input" value={line.tag || 'p'} onChange={(e) => setLine(i, { tag: e.target.value })} style={{ flex: 1 }}>
|
||||
{['h1', 'h2', 'h3', 'p', 'span'].map((t) => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
className="input"
|
||||
type="number"
|
||||
value={typeof line.fontSize === 'number' ? line.fontSize : ''}
|
||||
onChange={(e) => { const n = parseInt(e.target.value, 10); setLine(i, { fontSize: Number.isFinite(n) ? n : undefined }) }}
|
||||
placeholder="px"
|
||||
style={{ width: 70 }}
|
||||
/>
|
||||
<input type="color" value={hexOf(line.color)} onChange={(e) => setLine(i, { color: e.target.value })} style={{ width: 40, height: 38, padding: 2, border: '1px solid var(--line)', borderRadius: 6, background: 'var(--bg)' }} title="Color" />
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<input type="checkbox" checked={(line.weight || 400) >= 700} onChange={(e) => setLine(i, { weight: e.target.checked ? 700 : 400 })} />
|
||||
<span className="sans" style={{ fontSize: '0.82rem', color: 'var(--muted)' }}>Bold</span>
|
||||
</label>
|
||||
{lines.length > 1 && (
|
||||
<span className="link-accent" style={{ fontSize: '0.8rem', color: '#d98b84' }} onClick={() => removeLine(i)}>Remove line</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button onClick={addLine} className="pill" style={{ fontSize: '0.82rem', alignSelf: 'flex-start' }}>+ Add line</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ButtonsPanel({ element, onProps }) {
|
||||
const items = element.props?.items || []
|
||||
const setItem = (i, patch) => onProps({ items: items.map((it, idx) => (idx === i ? { ...it, ...patch } : it)) })
|
||||
const addItem = () => onProps({ items: [...items, { label: 'Button', to: '/', variant: 'primary' }] })
|
||||
const removeItem = (i) => onProps({ items: items.filter((_, idx) => idx !== i) })
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<AlignField value={element.props?.align} onChange={(v) => onProps({ align: v })} />
|
||||
{items.map((it, i) => (
|
||||
<div key={i} style={{ border: '1px solid var(--line-soft)', borderRadius: 8, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<input className="input" value={it.label} onChange={(e) => setItem(i, { label: e.target.value })} placeholder="Label" />
|
||||
<input className="input" value={it.to} onChange={(e) => setItem(i, { to: e.target.value })} placeholder="/path" style={{ fontFamily: 'ui-monospace,Menlo,monospace' }} />
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
|
||||
<select className="input" value={it.variant || 'primary'} onChange={(e) => setItem(i, { variant: e.target.value })} style={{ flex: 1 }}>
|
||||
<option value="primary">primary</option>
|
||||
<option value="ghost">ghost</option>
|
||||
</select>
|
||||
{items.length > 1 && (
|
||||
<span className="link-accent" style={{ fontSize: '0.8rem', color: '#d98b84' }} onClick={() => removeItem(i)}>Remove</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button onClick={addItem} className="pill" style={{ fontSize: '0.82rem', alignSelf: 'flex-start' }}>+ Add button</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const swatch = { width: '100%', height: 38, padding: 2, border: '1px solid var(--line)', borderRadius: 6, background: 'var(--bg)' }
|
||||
|
||||
function MoonPanel({ element, onProps }) {
|
||||
const p = element.props || {}
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<p className="sans dim" style={{ margin: 0, fontSize: '0.8rem' }}>Uses the moon from the hero artwork.</p>
|
||||
<label>
|
||||
<span className="field-label">Size — {p.size || 96}px</span>
|
||||
<input type="range" min="24" max="320" step="1" value={p.size || 96} onChange={(e) => onProps({ size: Number(e.target.value) })} style={{ width: '100%' }} />
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">Glow — {Math.round((p.glow ?? 0.5) * 100)}%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value={p.glow ?? 0.5} onChange={(e) => onProps({ glow: Number(e.target.value) })} style={{ width: '100%' }} />
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function BadgePanel({ element, onProps }) {
|
||||
const p = element.props || {}
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<label>
|
||||
<span className="field-label">Text</span>
|
||||
<input className="input" value={p.text || ''} onChange={(e) => onProps({ text: e.target.value })} />
|
||||
</label>
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<label style={{ flex: 1 }}>
|
||||
<span className="field-label">Background</span>
|
||||
<input type="color" value={hexOf(p.bgColor)} onChange={(e) => onProps({ bgColor: e.target.value })} style={swatch} />
|
||||
</label>
|
||||
<label style={{ flex: 1 }}>
|
||||
<span className="field-label">Text color</span>
|
||||
<input type="color" value={hexOf(p.textColor)} onChange={(e) => onProps({ textColor: e.target.value })} style={swatch} />
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span className="field-label">Corner radius — {Math.min(p.borderRadius ?? 999, 24)}px</span>
|
||||
<input type="range" min="0" max="24" step="1" value={Math.min(p.borderRadius ?? 999, 24)} onChange={(e) => onProps({ borderRadius: Number(e.target.value) })} style={{ width: '100%' }} />
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ImagePanel({ element, onProps }) {
|
||||
const p = element.props || {}
|
||||
const [up, setUp] = useState(false)
|
||||
async function onFile(e) {
|
||||
const f = e.target.files?.[0]
|
||||
e.target.value = ''
|
||||
if (!f) return
|
||||
if (f.size > 1024 * 1024 && !confirm('This image is over 1 MB and may slow the page. Upload anyway?')) return
|
||||
setUp(true)
|
||||
try {
|
||||
const { url } = await api.admin.upload(f)
|
||||
onProps({ src: url })
|
||||
} catch {
|
||||
/* ignore */
|
||||
} finally {
|
||||
setUp(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<div>
|
||||
<span className="field-label">Image</span>
|
||||
{p.src && <img src={p.src} alt="" style={{ width: '100%', maxHeight: 90, objectFit: 'contain', borderRadius: 6, border: '1px solid var(--line)', marginBottom: 8 }} />}
|
||||
<label className="btn btn-ghost btn-sq" style={{ display: 'inline-block', cursor: 'pointer' }}>
|
||||
{up ? 'Uploading…' : p.src ? 'Replace' : 'Upload'}
|
||||
<input type="file" accept="image/*" onChange={onFile} hidden disabled={up} />
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span className="field-label">Width — {p.width || 40}%</span>
|
||||
<input type="range" min="10" max="100" step="1" value={p.width || 40} onChange={(e) => onProps({ width: Number(e.target.value) })} style={{ width: '100%' }} />
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">Alt text</span>
|
||||
<input className="input" value={p.alt || ''} onChange={(e) => onProps({ alt: e.target.value })} />
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user