/* ====== Componentes reutilizáveis ====== */ const { useState, useRef, useEffect, useMemo } = React; const Icon = { back: (p) => (), check: (p) => (), chevron: (p) => (), info: (p) => (), spark: (p) => (), tag: (p) => (), wa: (p) => (), whatsLine: (p) => (), }; /* Option card (single or multi) */ function Option({ label, selected, multi, onClick }) { return ( ); } /* Before / after showcase — grid de 3 colunas */ function ResultsShowcase({ photos }) { return (
{photos.map((src, k) => (
Antes e depois — harmonização facial
))}
Resultados reais · Dra. Thayna Gonçalves
); } /* Country selector + phone */ function PhonePicker({ country, setCountry, phone, setPhone, onEnter }) { const [open, setOpen] = useState(false); const [q, setQ] = useState(""); const wrapRef = useRef(null); const list = useMemo(() => { const s = q.trim().toLowerCase(); if (!s) return window.COUNTRIES; return window.COUNTRIES.filter(c => c.n.toLowerCase().includes(s) || c.d.includes(s) || c.c.toLowerCase().includes(s) ); }, [q]); useEffect(() => { function onDoc(e) { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); } document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, []); return (
setPhone(e.target.value)} onKeyDown={e => { if (e.key === "Enter") onEnter && onEnter(); }} autoFocus />
{open && (
setQ(e.target.value)} autoFocus />
{list.map(c => ( ))} {list.length === 0 &&
Nenhum país encontrado.
}
)}
); } Object.assign(window, { Icon, Option, ResultsShowcase, PhonePicker });