Alexey Pavlov
4702614896
Мобилка: - Header: hide-on-scroll, мобильный burger-menu, тонкая адаптация - Hero: текст и кнопки оптимизированы под узкие экраны (full-width buttons) - ArticleCard featured: на мобилке в столбик, картинка сверху - Stats: компактная сетка 2x2 с уменьшенным шрифтом - Глобально: scroll-behavior smooth, safe-area-inset, tap targets 40px+ - prefers-reduced-motion respected Страница статьи: - ReadingProgress: прогресс-бар сверху при скролле - ScrollToTop: круглая кнопка наверху после 800px скролла - ShareButton: Web Share API на мобилках, копирование URL на десктопе - Related articles: подбираем по пересечению тегов (max 3) - Мобильная типографика: prose-base sm:prose-lg, leading-relaxed SEO/инфра: - /api/search: простой поиск по title/excerpt/tags с подсветкой и скорингом - SearchBox: оверлей с / хоткеем, дебаунс 250ms, мобиле-friendly - /rss.xml: полноценный RSS-фид - sitemap.xml: динамический через next sitemap() - robots.txt: динамический - viewport metadata + theme-color для светлой/тёмной темы - alternates rel=alternate type=application/rss+xml
43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
import { BookOpen, Clock, Brain, Eye } from 'lucide-react';
|
|
|
|
function StatCard({ icon: Icon, value, label }) {
|
|
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">{value}</div>
|
|
<div className="text-[10px] sm:text-xs mute uppercase tracking-wider truncate">{label}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 n.toLocaleString('ru-RU');
|
|
}
|
|
|
|
export default function Stats({ data }) {
|
|
if (!data) return null;
|
|
return (
|
|
<section 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={fmt(data.articles_count)} label="статей" />
|
|
<StatCard icon={Clock} value={fmt(data.total_reading_min)} label="мин чтения" />
|
|
<StatCard icon={Brain} value={fmt(data.tokens_out)} label="токенов" />
|
|
<StatCard icon={Eye} value={fmt(data.total_views)} label="просмотров" />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|