// ============================================================ // WASIED · Admin CMS - full live editor (writes to CMS store) // ============================================================ const THUMB_OPTIONS = ['gradient-cyan', 'gradient-green', 'gradient-indigo', 'gradient-amber', 'gradient-purple', 'gradient-red']; const THUMB_CSS = { 'gradient-cyan': 'linear-gradient(135deg, #0E7490, #67E8F9)', 'gradient-green': 'linear-gradient(135deg, #15803D, #6EE7A7)', 'gradient-indigo': 'linear-gradient(135deg, #4F5DBE, #8FA8FF)', 'gradient-amber': 'linear-gradient(135deg, #B45309, #FBBF24)', 'gradient-purple': 'linear-gradient(135deg, #7E22CE, #C4B5FD)', 'gradient-red': 'linear-gradient(135deg, #B91C1C, #FB7185)', }; function AdminContentPage() { const cms = useCMS(); const [tab, setTab] = React.useState('hero'); const [saved, setSaved] = React.useState(false); const flash = () => { setSaved(true); setTimeout(() => setSaved(false), 1600); }; const tabs = [ { k: 'hero', label: 'Hero homepage', icon: 'dashboard' }, { k: 'clients', label: 'Clients (marquee)', icon: 'users' }, { k: 'media', label: 'Vidéos & images', icon: 'video' }, { k: 'showcase', label: 'Aperçu produit', icon: 'layers' }, { k: 'seo', label: 'SEO & méta', icon: 'globe' }, { k: 'site', label: 'Réglages du site', icon: 'settings' }, ]; return ( {saved && Enregistré & publié} }>
{/* Section nav */}
{tabs.map(t => ( ))}
Les modifications sont publiées en direct sur le site public. Ouvrez l'accueil dans un autre onglet pour voir le résultat.
{/* Editor */}
{tab === 'hero' && } {tab === 'clients' && } {tab === 'media' && } {tab === 'showcase' && } {tab === 'seo' && } {tab === 'site' && }
); } // ---------- Hero editor ---------- function CmsHero({ cms, flash }) { const h = cms.hero; const set = (k, v) => setCMS(s => { s.hero[k] = v; return s; }); return (
set('eyebrow', v)}/>
set('titleLine1', v)}/> set('titleLine2', v)}/>
set('titleAccent', v)}/> set('lede', v)}/>
set('ctaPrimaryLabel', v)}/> set('ctaPrimaryHref', v)}/> set('ctaSecondaryLabel', v)}/> set('ctaSecondaryHref', v)}/>
set('metaLine', v)}/>
{h.eyebrow}
{h.titleLine1} {h.titleLine2} {h.titleAccent}
{h.lede}
{h.ctaPrimaryLabel} {h.ctaSecondaryLabel}
); } // ---------- Clients editor ---------- function CmsClients({ cms, flash }) { const [draft, setDraft] = React.useState(''); const clients = cms.clients; const addClient = () => { const names = draft.split(',').map(s => s.trim()).filter(Boolean); if (!names.length) return; setCMS(s => { s.clients = [...s.clients, ...names]; return s; }); setDraft(''); }; const remove = (i) => setCMS(s => { s.clients = s.clients.filter((_, j) => j !== i); return s; }); const move = (i, dir) => setCMS(s => { const arr = [...s.clients]; const j = i + dir; if (j < 0 || j >= arr.length) return s; [arr[i], arr[j]] = [arr[j], arr[i]]; s.clients = arr; return s; }); return (
setCMS(s => { s.clientsCaption = v; return s; })}/>
setDraft(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') addClient(); }}/>
{clients.map((c, i) => (
{c}
))}
{cms.clientsCaption}
{clients.slice(0, 14).map((c, i) => {c})} {clients.length > 14 && +{clients.length - 14}}
); } // ---------- Media editor ---------- function CmsMedia({ cms, flash }) { const media = cms.media || []; const addMedia = (type) => setCMS(s => { const id = 'm' + (Date.now()); s.media = [...(s.media || []), { id, type, title: type === 'video' ? 'Nouvelle vidéo' : 'Nouvelle image', client: '', tag: 'UI', duration: type === 'video' ? '0:00' : null, thumb: THUMB_OPTIONS[(s.media || []).length % THUMB_OPTIONS.length], published: false }]; return s; }); const update = (id, k, v) => setCMS(s => { s.media = s.media.map(m => m.id === id ? { ...m, [k]: v } : m); return s; }); const remove = (id) => setCMS(s => { s.media = s.media.filter(m => m.id !== id); return s; }); return (
}>

Les médias publiés apparaissent dans la section « Démos » de la page Portfolio. Glissez vos fichiers ou collez une URL ; ici on simule avec une vignette colorée.

{media.map(m => (
{/* Thumb + drop zone */}
{m.type === 'video' ?
: }
{THUMB_OPTIONS.map(t => (
{/* Fields */}
update(m.id, 'title', e.target.value)} containerStyle={{ marginBottom: 0 }}/>
update(m.id, 'client', e.target.value)}/> update(m.id, 'tag', e.target.value)}/> {m.type === 'video' ? update(m.id, 'duration', e.target.value)}/> : Image}
{/* Actions */}
update(m.id, 'published', v)} label="Publié"/>
))} {!media.length &&
Aucun média. Ajoutez une vidéo ou une image.
}
); } // ---------- Showcase toggles ---------- function CmsShowcase({ cms, flash }) { const sh = cms.showcaseEnabled; const set = (k, v) => setCMS(s => { s.showcaseEnabled[k] = v; return s; }); const items = [ { k: 'hosting', label: 'Hébergement · console live' }, { k: 'orders', label: 'Commandes · suivi' }, { k: 'formations', label: 'Formations · player' }, { k: 'billing', label: 'Facturation · cartes' }, ]; return (

Activez ou masquez chaque onglet de la section « Un seul dashboard ».

{items.map(it => set(it.k, v)} label={it.label}/>)}
); } // ---------- SEO ---------- function CmsSeo({ cms, flash }) { const s0 = cms.seo; const set = (k, v) => setCMS(s => { s.seo[k] = v; return s; }); return (
set('title', v)}/> set('description', v)}/>
wasied.com
{s0.title}
{s0.description}
); } // ---------- Site settings ---------- function CmsSite({ cms, flash }) { const st = cms.site; const set = (k, v) => setCMS(s => { s.site[k] = v; return s; }); return (
{[ { v: 'available', label: 'Disponible', c: 'var(--cash)' }, { v: 'limited', label: 'Capacité limitée', c: 'var(--xp)' }, { v: 'busy', label: 'Complet', c: 'var(--hp)' }, ].map(o => ( ))}
set('announcement', v)} placeholder="Ex : Maintenance prévue dimanche 2h-4h"/> set('maintenanceMode', v)} label="Activer le mode maintenance" sub="Affiche une page de maintenance aux visiteurs (admins exclus)."/>
); } // ---------- Shared CMS UI ---------- const cmsIconBtn = { width: 22, height: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', border: 'none', borderRadius: 5, cursor: 'pointer', color: 'var(--fg-3)', padding: 0 }; function CmsPanel({ title, action, children }) { return (

{title}

{action}
{children} ); } function CmsField({ label, value, onChange, textarea, placeholder }) { return (
{textarea ?