Alexey Pavlov
03c10eab6e
- SeriesGrid: карточки серий с иконками (Sparkles/Plug/Zap/Layers) и цветовыми темами - /series/[slug]: страница серии с интро и сеткой статей в порядке из article_ids - Stats: count-up анимация (easeOutQuart 1.2s) при появлении в viewport через IntersectionObserver - sitemap.xml: добавлены /notes и все серии
83 lines
3.0 KiB
JavaScript
83 lines
3.0 KiB
JavaScript
'use client';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { BookOpen, Clock, Brain, Eye } from 'lucide-react';
|
|
|
|
function fmt(n) {
|
|
if (!n) return '0';
|
|
if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
|
|
if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
|
|
return Math.round(n).toLocaleString('ru-RU');
|
|
}
|
|
|
|
/** Плавный count-up от 0 до value за ~1.2 секунды */
|
|
function useCountUp(target, run) {
|
|
const [val, setVal] = useState(0);
|
|
useEffect(() => {
|
|
if (!run || !target) { setVal(target || 0); return; }
|
|
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
if (reduce) { setVal(target); return; }
|
|
let start = null;
|
|
const duration = 1200;
|
|
let raf = 0;
|
|
const step = (ts) => {
|
|
if (!start) start = ts;
|
|
const t = Math.min(1, (ts - start) / duration);
|
|
// easeOutQuart для приятной кривой
|
|
const eased = 1 - Math.pow(1 - t, 4);
|
|
setVal(Math.floor(target * eased));
|
|
if (t < 1) raf = requestAnimationFrame(step);
|
|
else setVal(target);
|
|
};
|
|
raf = requestAnimationFrame(step);
|
|
return () => cancelAnimationFrame(raf);
|
|
}, [target, run]);
|
|
return val;
|
|
}
|
|
|
|
function StatCard({ icon: Icon, value, label, run }) {
|
|
const animated = useCountUp(value || 0, run);
|
|
return (
|
|
<div className="article-card flex items-center gap-3 sm:gap-4 p-4 sm:p-5">
|
|
<div
|
|
className="w-10 h-10 sm:w-11 sm:h-11 rounded-lg flex items-center justify-center flex-shrink-0"
|
|
style={{ background: 'rgb(var(--accent) / 0.1)' }}
|
|
>
|
|
<Icon className="w-4 h-4 sm:w-5 sm:h-5 accent" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-xl sm:text-2xl font-bold ink leading-none mb-1 tabular-nums">{fmt(animated)}</div>
|
|
<div className="text-[10px] sm:text-xs mute uppercase tracking-wider truncate">{label}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Stats({ data }) {
|
|
const ref = useRef(null);
|
|
const [run, setRun] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
const io = new IntersectionObserver((entries) => {
|
|
if (entries[0].isIntersecting) { setRun(true); io.disconnect(); }
|
|
}, { threshold: 0.3 });
|
|
io.observe(ref.current);
|
|
return () => io.disconnect();
|
|
}, []);
|
|
|
|
if (!data) return null;
|
|
return (
|
|
<section ref={ref} className="container-wide pb-12">
|
|
<h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute mb-4 sm:mb-5">
|
|
Что уже написал ИИ
|
|
</h2>
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
|
|
<StatCard icon={BookOpen} value={data.articles_count} label="статей" run={run} />
|
|
<StatCard icon={Clock} value={data.total_reading_min} label="мин чтения" run={run} />
|
|
<StatCard icon={Brain} value={data.tokens_out} label="токенов" run={run} />
|
|
<StatCard icon={Eye} value={data.total_views} label="просмотров" run={run} />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|