/* Nuya — Mockup components for design review Renders both Current (as-is in the app) and Proposed (redesigned) variants of the main screens inside a lightweight phone frame. */ const { useState } = React; // ─── Shared iconography (inline SVGs) ───────────────────────────── const Ico = { home: (c='currentColor') => , chart: (c='currentColor') => , spark: (c='currentColor') => , cal: (c='currentColor') => , plus: (c='currentColor') => , heart: (c='currentColor') => , flask: (c='currentColor') => , alert: (c='currentColor') => , folder: (c='currentColor') => , chevR: (c='currentColor') => , bell: (c='currentColor') => , send: (c='currentColor') => , search: (c='currentColor') => , pill: (c='currentColor') => , }; // ─── Phone shell ────────────────────────────────────────────────── function Phone({ children, bg = 'white' }) { return (
{children}
); } // ─── Tab bar (Current & Proposed) ──────────────────────────────── function TabBarCurrent({ active = 0 }) { const items = [Ico.home, Ico.chart, null, Ico.spark, Ico.cal]; return (
{items.map((it, i) => { if (i === 2) return (
{Ico.plus('white')}
); const on = i === active; return (
{it('currentColor')}
); })}
); } function TabBarProposed({ active = 0 }) { const items = [ { i: Ico.home, l: 'Hoje' }, { i: Ico.chart, l: 'Saúde' }, null, { i: Ico.spark, l: 'Nuya' }, { i: Ico.cal, l: 'Agenda' }, ]; return (
{items.map((it, i) => { if (i === 2) return (
{Ico.plus('#ffe4dc')}
); const on = i === active; return (
{it.i('currentColor')}
{it.l}
); })}
); } // ═════════════════════════════════════════════════════════════════ // HOME — current // ═════════════════════════════════════════════════════════════════ function HomeCurrent() { const Bubble = ({ bg, d, x, y }) => (
•
); const Action = ({ bg, label, dark }) => (
{label}
); return (
{/* soft gradient header bg */}
{/* header */}
S
Nuya
CA
{/* greeting */}
Olá Cami
Como está sua saúde hoje?
{/* 6 action grid */}
{/* Health ring */}
{/* ring */}
{/* bubbles around */} {[ {bg:'#fbf1d2', x:95, y:-2}, {bg:'#f5e6c4', x:150, y:12}, {bg:'#dde9f8', x:188, y:58}, {bg:'#fbf1d2', x:188, y:128}, {bg:'#dcefe0', x:150, y:174},{bg:'#fbe2e2', x:95, y:190}, {bg:'#c8dce0', x:32, y:174}, {bg:'#dde9f8', x:-2, y:128}, ].map((b,i)=>)} {/* center score */}
8.2
seu health score
); } // ═════════════════════════════════════════════════════════════════ // HOME — proposed // ═════════════════════════════════════════════════════════════════ function HomeProposed() { return (
{/* header */}
Terça · 21 Abr
Bom dia, Cami
CA
{/* Hero: Health score — big, one thing */}
Health score
Estável
8.2
/ 10
+0.3 vs mês
{/* system strip */}
{[0.9,0.82,0.75,0.88,0.65,0.9,0.78,0.85].map((v,i)=>(
))}
IMUNCARDMUSCDNA PULMNERVDIGHORM
{/* Quick primary actions — 2 only, prioritized */}
{Ico.plus('white')}
Importar exame
Foto, PDF ou galeria
{Ico.spark('#ffe4dc')}
Pergunte
à Nuya
{/* Today — what matters now */}
Hoje
3 itens
{[ { t: '08:00', title: 'Losartana 50mg', sub: 'após café', icon: Ico.pill, accent: '#ff7a5c', done: true }, { t: '14:30', title: 'Dra. Helena · Endócrino', sub: 'Hospital Sírio', icon: Ico.heart, accent: '#402e94' }, { t: '21:00', title: 'Vitamina D', sub: '1 cápsula', icon: Ico.pill, accent: '#d4a520' }, ].map((r, i) => (
{r.t}
{r.title}
{r.sub}
))}
); } Object.assign(window, { Phone, HomeCurrent, HomeProposed, Ico, TabBarCurrent, TabBarProposed });