feat: блок «Сейчас» + «Заметки редактора» + ArticleMeta

- NowBlock: live indicator (последняя статья / идёт генерация) + bar-чарт за 7 дней - NotesBlock: карточки заметок редактора с pin - /notes: отдельная страница со всеми заметками - ArticleMeta: раскрывающийся блок «Как сделана эта статья» на странице статьи - В шапку добавлена ссылка «Заметки» (desktop и mobile)
2026-05-31 10:05:28 +03:00
parent 3154b47578
commit c27985614e
8 changed files with 300 additions and 8 deletions
@@ -0,0 +1,50 @@
+'use client';
+import { useState } from 'react';
+import { Cpu, Zap, Clock, ChevronDown } from 'lucide-react';
+
+export default function ArticleMeta({ article }) {
+  const [open, setOpen] = useState(false);
+  const tokensIn = article.tokens_in || 0;
+  const tokensOut = article.tokens_out || 0;
+  const total = tokensIn + tokensOut;
+  if (!total) return null;
+
+  return (
+    <div className="mt-12 article-card p-5 sm:p-6">
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="w-full flex items-center justify-between gap-3 text-left"
+      >
+        <div className="flex items-center gap-2">
+          <Cpu className="w-4 h-4 accent" />
+          <span className="font-medium ink">Как сделана эта статья</span>
+        </div>
+        <ChevronDown className={`w-4 h-4 mute transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div className="mt-4 pt-4 border-t-soft grid sm:grid-cols-3 gap-4 text-sm">
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Модель</div>
+            <div className="ink font-medium">Claude Sonnet 4.6</div>
+            <div className="text-xs mute mt-1">через aiprimetech.io</div>
+          </div>
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Токены</div>
+            <div className="ink font-medium tabular-nums">
+              {tokensIn.toLocaleString('ru-RU')} <span className="mute text-xs font-normal">in</span>
+              {' / '}
+              {tokensOut.toLocaleString('ru-RU')} <span className="mute text-xs font-normal">out</span>
+            </div>
+            <div className="text-xs mute mt-1">≈ {total.toLocaleString('ru-RU')} всего</div>
+          </div>
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Процесс</div>
+            <div className="ink font-medium">2 этапа</div>
+            <div className="text-xs mute mt-1">генерация → self-critique</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}