/* global React, ALERTS, ALERT_CATS, useReveal */ const { useState, useMemo } = React; function Alerts() { const [cat, setCat] = useState('Todas'); const [query, setQuery] = useState(''); const [ref, visible] = useReveal(); const filtered = useMemo(() => { return ALERTS.filter(a => { const okCat = cat === 'Todas' || a.cat === cat; const okQ = !query || a.name.toLowerCase().includes(query.toLowerCase()); return okCat && okQ; }); }, [cat, query]); const counts = useMemo(() => { const c = { Todas: ALERTS.length }; ALERTS.forEach(a => { c[a.cat] = (c[a.cat] || 0) + 1; }); return c; }, []); return (
Catálogo de alertas

{ALERTS.length} alertas configurables.
Tú decides cuáles activar.

setQuery(e.target.value)} />
{ALERT_CATS.map(c => ( ))}
{filtered.map((a, i) => (
{a.cat} {a.name}
))} {filtered.length === 0 && (
No encontramos alertas con "{query}".
)}
); } window.Alerts = Alerts;