function Stats(){
const rows = [
{ n: 4, suf: "", label: "products in the suite", sub: "EDM · Mediator · DB:Regions · Mediareport" },
{ n: 15, suf: "+", label: "years on the market", sub: "company registered 29 Oct 2020, team earlier" },
{ n: 100, suf: "+", label: "regions covered", sub: "branches of EMG radio stations" },
{ n: 564, suf: "", label: "accreditation №", sub: "Russian Ministry of Digital Development · 29.10.2020" },
];
return (
Numbers
{rows.map((r, i)=> )}
);
}
function StatTile({row}){
const ref = React.useRef(null);
const [val, setVal] = React.useState(0);
React.useEffect(()=>{
const el = ref.current; if(!el) return;
const io = new IntersectionObserver(entries=>{
if (entries[0].isIntersecting){
let start = performance.now(); const dur = 1200;
function tick(now){
const t = Math.min(1, (now-start)/dur);
const e = 1 - Math.pow(1-t, 3);
setVal(Math.round(row.n * e));
if (t < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
io.disconnect();
}
}, {threshold: .3});
io.observe(el);
return ()=> io.disconnect();
}, []);
return (
);
}
window.Stats = Stats;