// backoffice.jsx — admin editor panel // Comprime imagem para base64 WebP adequado para mobile (max 720px) async function compressImage(file, maxWidth = 720, quality = 0.82) { return new Promise(resolve => { const img = new Image(); const url = URL.createObjectURL(file); img.onload = () => { URL.revokeObjectURL(url); const scale = Math.min(1, maxWidth / img.width); const canvas = document.createElement('canvas'); canvas.width = Math.round(img.width * scale); canvas.height = Math.round(img.height * scale); canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height); resolve(canvas.toDataURL('image/webp', quality)); }; img.src = url; }); } // ──────────────────────────────────────────────────────────── // Reusable primitives // ──────────────────────────────────────────────────────────── const inputBase = { width: '100%', padding: '11px 13px', borderRadius: 10, border: '1px solid var(--line)', background: 'var(--field)', fontSize: 14, color: 'var(--ink)', outline: 'none', transition: 'border-color 120ms, background 120ms', }; function Field({ label, hint, children, full = true }) { return ( ); } function TextInput({ value, onChange, placeholder, multiline = false }) { const [focused, setFocused] = React.useState(false); const Comp = multiline ? 'textarea' : 'input'; return ( onChange(e.target.value)} placeholder={placeholder} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} rows={multiline ? 3 : undefined} style={{ ...inputBase, borderColor: focused ? 'var(--ink)' : 'var(--line)', background: focused ? '#fff' : 'var(--field)', resize: multiline ? 'vertical' : 'none', fontFamily: 'inherit', minHeight: multiline ? 72 : undefined, }} /> ); } function NumberInput({ value, onChange, placeholder }) { const [focused, setFocused] = React.useState(false); return ( onChange(e.target.value === '' ? null : Number(e.target.value))} placeholder={placeholder} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={{ ...inputBase, borderColor: focused ? 'var(--ink)' : 'var(--line)', background: focused ? '#fff' : 'var(--field)' }} /> ); } function Section({ title, subtitle, children, right }) { return (

{title}

{subtitle && (

{subtitle}

)}
{right}
{children}
); } // ──────────────────────────────────────────────────────────── // Style picker (4 cards) // ──────────────────────────────────────────────────────────── function StylePicker({ value, onChange }) { const options = [ { id: 'classic', name: 'Clássico', desc: 'Lista vertical de botões. Limpo, direto, ideal para quem tem poucos links importantes.', preview: , }, { id: 'bento', name: 'Bento', desc: 'Grade modular com tamanhos variados. Visual moderno e versátil para mostrar tudo de uma vez.', preview: , }, { id: 'catalog', name: 'Catálogo', desc: 'Cards de produto com foto, preço e botão de compra. Para vender direto da bio.', preview: , }, { id: 'mural', name: 'Mural', desc: 'Grid editorial com cards coloridos individualmente. Cada card tem cor e tamanho próprios.', preview: , }, ]; return (
{options.map(opt => { const active = value === opt.id; return ( ); })}
); } // Tiny preview thumbnails (visual hint of each style) function ClassicPreview() { return ( {[40, 50, 60, 70].map(y => ( ))} ); } function BentoPreview() { return ( ); } function MuralPreview() { return ( ); } function CatalogPreview() { return ( ); } // ──────────────────────────────────────────────────────────── // Palette picker (+ custom pickers when 'custom' selected) // ──────────────────────────────────────────────────────────── function PalettePicker({ value, onChange, customColors, onCustomChange }) { const ids = Object.keys(window.PALETTES); return (
{ids.map(id => { const p = window.PALETTES[id]; const active = value === id; return ( ); })} {/* Custom palette swatch */} onChange('custom')} />
{value === 'custom' && ( )}
); } function CustomPaletteSwatch({ active, colors, onClick }) { return ( ); } function CustomPaletteEditor({ colors, onChange }) { const c = colors || {}; const set = (key, value) => onChange({ ...c, [key]: value }); const slots = [ { key: 'bg', label: 'Fundo', hint: 'Cor de trás da página' }, { key: 'surface', label: 'Cards', hint: 'Fundo dos botões/cards' }, { key: 'ink', label: 'Texto', hint: 'Cor principal do texto' }, { key: 'accent', label: 'Botão', hint: 'CTAs e destaques' }, ]; return (
{slots.map(s => ( ))}
); } // ──────────────────────────────────────────────────────────── // Background image editor // ──────────────────────────────────────────────────────────── function BackgroundEditor({ background, onChange, palette }) { const I = window.Icon; const fileRef = React.useRef(null); const [dragOver, setDragOver] = React.useState(false); const handleFile = async (file) => { if (!file || !file.type.startsWith('image/')) return; const compressed = await compressImage(file, 1280, 0.82); onChange({ ...background, image: compressed }); }; const onDrop = (e) => { e.preventDefault(); setDragOver(false); handleFile(e.dataTransfer.files?.[0]); }; return (
handleFile(e.target.files?.[0])} /> {!background.image ? ( ) : (
{/* Preview that mirrors the rendering */}
Como aparece com a paleta atual
)} {background.image && (
onChange({ ...background, opacity: v / 100 })} suffix="%" /> onChange({ ...background, blur: v })} suffix="px" />
)}
); } function Slider({ label, hint, value, min, max, onChange, suffix = '' }) { return ( ); } // ──────────────────────────────────────────────────────────── // Upload de imagem para link (catálogo) // ──────────────────────────────────────────────────────────── function LinkImageUpload({ value, onChange }) { const fileRef = React.useRef(null); const [loading, setLoading] = React.useState(false); async function handleFile(file) { if (!file || !file.type.startsWith('image/')) return; setLoading(true); try { const compressed = await compressImage(file); onChange(compressed); } finally { setLoading(false); } } return (
handleFile(e.target.files?.[0])} /> {value ? (
) : ( )}
); } // ──────────────────────────────────────────────────────────── // Link editor row (collapsible) // ──────────────────────────────────────────────────────────── function LinkRow({ link, index, total, onChange, onDelete, onMove, expandedId, setExpandedId, currentStyle }) { const I = window.Icon; const expanded = expandedId === link.id; const Ico = I[link.icon] || I.link; return (
{/* Header */}
setExpandedId(expanded ? null : link.id)}> {/* Reorder */}
e.stopPropagation()}>
{/* Icon */}
{/* Title + url */}
{link.title || Sem título}
{link.url || 'sem url'}
{/* Active toggle */}
{/* Expanded body */} {expanded && (
onChange({ ...link, title: v })} placeholder="Ex: Curso de produtividade" />
onChange({ ...link, url: v })} placeholder="https://" /> onChange({ ...link, subtitle: v })} placeholder="Descrição curta que aparece embaixo" /> onChange({ ...link, icon: v })} /> {/* Imagem do produto (catálogo) */} {currentStyle === 'catalog' && ( onChange({ ...link, image: v })} /> )} {/* Style-specific fields */} {(currentStyle === 'bento' || currentStyle === 'catalog') && (
onChange({ ...link, price: v })} placeholder="0,00" /> {currentStyle === 'catalog' && ( onChange({ ...link, tag: v })} placeholder="" /> )} {currentStyle === 'catalog' && ( onChange({ ...link, cta: v })} placeholder="Comprar" /> )}
)} {currentStyle === 'bento' && ( )} {currentStyle === 'mural' && ( <>
{[ { id: 'square', label: 'Quadrado' }, { id: 'vertical', label: 'Vertical' }, { id: 'wide', label: 'Largo' }, ].map(opt => ( ))}
onChange({ ...link, cardColor: e.target.value })} style={{ position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer', border: 'none', width: '100%', height: '100%' }} />
{link.cardColor || 'Padrão da paleta'} {link.cardColor && ( )}
)}
)}
); } function IconPicker({ value, onChange }) { const I = window.Icon; return (
{window.ICON_TYPES.map(t => { const Ico = I[t.id]; const active = value === t.id; return ( ); })}
); } // ──────────────────────────────────────────────────────────── // Profile editor // ──────────────────────────────────────────────────────────── function ProfileEditor({ profile, onChange }) { const avatarRef = React.useRef(null); const [compressing, setCompressing] = React.useState(false); async function handleAvatarFile(file) { if (!file || !file.type.startsWith('image/')) return; setCompressing(true); try { const compressed = await compressImage(file, 400, 0.88); onChange({ ...profile, avatar: compressed }); } finally { setCompressing(false); } } return (
handleAvatarFile(e.target.files?.[0])} />
onChange({ ...profile, name: v })} placeholder="Seu nome" /> onChange({ ...profile, handle: v.replace(/[^a-z0-9._-]/gi, '').toLowerCase() })} placeholder="seu.usuario" />
onChange({ ...profile, bio: v })} placeholder="Conte em uma frase o que você faz" multiline />
); } // ──────────────────────────────────────────────────────────── // Backoffice root // ──────────────────────────────────────────────────────────── function Backoffice({ state, setState }) { const I = window.Icon; const [expandedLinkId, setExpandedLinkId] = React.useState(null); const update = (patch) => setState(s => ({ ...s, ...patch })); const updateLink = (updated) => { setState(s => ({ ...s, links: s.links.map(l => l.id === updated.id ? updated : l) })); }; const deleteLink = (id) => { setState(s => ({ ...s, links: s.links.filter(l => l.id !== id) })); }; const moveLink = (index, delta) => { setState(s => { const arr = [...s.links]; const j = index + delta; if (j < 0 || j >= arr.length) return s; [arr[index], arr[j]] = [arr[j], arr[index]]; return { ...s, links: arr }; }); }; const addLink = () => { const id = 'l' + Date.now(); const newLink = { id, title: 'Novo link', url: 'https://', subtitle: '', icon: 'link', active: true, price: null, featured: false, size: 'square', cardColor: '', }; setState(s => ({ ...s, links: [...s.links, newLink] })); setExpandedLinkId(id); }; return (
update({ style })} /> {state.style === 'mural' && ( update({ bentoGap: v })} suffix="px" /> )}
update({ paletteId })} customColors={state.customColors} onCustomChange={customColors => update({ customColors })} />
update({ background })} palette={state.paletteId === 'custom' ? window.getCustomPalette(state.customColors) : window.PALETTES[state.paletteId]} />
update({ profile })} />
Adicionar link } >
{state.links.map((link, idx) => ( ))} {state.links.length === 0 && (
Nenhum link ainda. Clique em Adicionar link para começar.
)}
); } window.Backoffice = Backoffice;