/* MedMath — modern clinical homepage. */
const { useState, useEffect, useMemo, useRef } = React;
const { TOOLS, CATEGORIES } = window.MEDMATH_DATA;
const THEME_KEY = 'medmath:theme';
function getInitialTheme() {
try {
const saved = localStorage.getItem(THEME_KEY);
if (saved === 'light' || saved === 'dark') return saved;
} catch (e) {}
return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
/* ──────────────────────────────────────────────────────
Formula glyph — renders the calculator's formula
as a typographic mark on each card. Replaces emoji.
────────────────────────────────────────────────────── */
function FormulaGlyph({ formula, abbr, size = "md" }) {
if (!formula) return null;
if (formula.type === "fraction") {
return (
{formula.num}
{formula.den}
{formula.factor &&
{formula.factor} }
);
}
if (formula.type === "params") {
return (
{formula.parts.map((p, i) => (
{p}
{i < formula.parts.length - 1 && · }
))}
);
}
if (formula.type === "custom") {
return (
{formula.text}
);
}
return null;
}
/* ──────────────────────────────────────────────────────
Tool Card — the centerpiece. Three variants.
────────────────────────────────────────────────────── */
function ToolCard({ tool, style, index }) {
const cat = CATEGORIES[tool.category];
const number = String(index + 1).padStart(2, "0");
return (
{number}
{tool.abbr &&
{tool.abbr}
}
{tool.name}
{tool.short}
);
}
/* ──────────────────────────────────────────────────────
Header
────────────────────────────────────────────────────── */
function ThemeToggle({ theme, onToggle }) {
const isDark = theme === 'dark';
return (
{isDark ? (
) : (
)}
);
}
function Header({ onSearchFocus, theme, onToggleTheme }) {
return (
);
}
/* ──────────────────────────────────────────────────────
Hero
────────────────────────────────────────────────────── */
function Hero({ query, setQuery, inputRef }) {
return (
Biblioteca aberta · v1.2
{TOOLS.length} calculadoras{Object.keys(CATEGORIES).length} categorias
Cálculos clínicospara estudantes de farmácia.
Ferramentas validadas para hemograma, gasometria, função renal e parâmetros
metabólicos — com referências e interpretação automática dos resultados.
);
}
/* ──────────────────────────────────────────────────────
Filter bar
────────────────────────────────────────────────────── */
function Filters({ active, setActive, counts }) {
const cats = Object.entries(CATEGORIES);
return (
Categoria
setActive('all')}
>
Todos
{counts.all}
{cats.map(([key, cat]) => (
setActive(key)}
style={{ '--cat-hue': cat.hue }}
>
{counts[key] ?? 0}
))}
);
}
/* ──────────────────────────────────────────────────────
Results section grouped by category
────────────────────────────────────────────────────── */
function Results({ tools, cardStyle, activeCategory, query }) {
if (tools.length === 0) {
return (
∅
Nada encontrado para "{query}"
Tente outro termo, uma sigla (ASC, VCM) ou um parâmetro (pH, ALT).
);
}
// Group by category for "all" view; flat list otherwise
if (activeCategory !== 'all') {
return (
{tools.map((t, i) => (
);
}
const grouped = {};
tools.forEach(t => {
grouped[t.category] = grouped[t.category] || [];
grouped[t.category].push(t);
});
let runningIdx = 0;
return (
{Object.keys(CATEGORIES).map(catKey => {
const list = grouped[catKey];
if (!list) return null;
const cat = CATEGORIES[catKey];
return (
{list.length} {list.length === 1 ? 'cálculo' : 'cálculos'}
{list.map((t) => {
const idx = runningIdx++;
return
);
})}
);
}
/* ──────────────────────────────────────────────────────
Disclaimer + suggest banner
────────────────────────────────────────────────────── */
function Banner() {
return (
Sugestões
Não encontrou o cálculo que precisa?
Envie a fórmula ou indique a referência bibliográfica — novas ferramentas são avaliadas e publicadas semanalmente.
Sugerir um cálculo
Aviso
Ferramenta de apoio educacional. Os resultados não substituem o julgamento
clínico de profissionais habilitados nem dispensam a análise integral
do laudo, do contexto clínico e das referências laboratoriais locais.
);
}
/* ──────────────────────────────────────────────────────
Footer
────────────────────────────────────────────────────── */
function Footer() {
return (
);
}
/* ──────────────────────────────────────────────────────
App root
────────────────────────────────────────────────────── */
function App() {
const [theme, setTheme] = useState(getInitialTheme);
const [query, setQuery] = useState("");
const [active, setActive] = useState('all');
const inputRef = useRef(null);
// Cmd/Ctrl+K to focus search
useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
e.preventDefault();
inputRef.current?.focus();
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
return TOOLS.filter(tool => {
const matchCat = active === 'all' || tool.category === active;
const matchQ = !q || [
tool.name, tool.short, tool.desc, tool.abbr ?? '', ...(tool.tags ?? [])
].some(s => s.toLowerCase().includes(q));
return matchCat && matchQ;
});
}, [query, active]);
const counts = useMemo(() => {
const c = { all: TOOLS.length };
Object.keys(CATEGORIES).forEach(k => {
c[k] = TOOLS.filter(t => t.category === k).length;
});
return c;
}, []);
// Apply theme on root + persist
useEffect(() => {
document.documentElement.dataset.theme = theme;
try { localStorage.setItem(THEME_KEY, theme); } catch (e) {}
}, [theme]);
const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark');
return (
inputRef.current?.focus()}
theme={theme}
onToggleTheme={toggleTheme}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(