feat: блок «Сейчас» + «Заметки редактора» + ArticleMeta
- NowBlock: live indicator (последняя статья / идёт генерация) + bar-чарт за 7 дней - NotesBlock: карточки заметок редактора с pin - /notes: отдельная страница со всеми заметками - ArticleMeta: раскрывающийся блок «Как сделана эта статья» на странице статьи - В шапку добавлена ссылка «Заметки» (desktop и mobile)
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
import Link from 'next/link';
|
||||
import { Pin, ArrowRight, MessageCircle } from 'lucide-react';
|
||||
import { formatDate } from '@/lib/markdown';
|
||||
|
||||
function NoteCard({ note }) {
|
||||
return (
|
||||
<article className="article-card p-5 sm:p-6 h-full flex flex-col">
|
||||
{note.is_pinned && (
|
||||
<div className="flex items-center gap-1.5 text-xs accent mb-2">
|
||||
<Pin className="w-3 h-3" /> закреплено
|
||||
</div>
|
||||
)}
|
||||
{note.title && (
|
||||
<h3 className="text-base sm:text-lg font-semibold ink mb-2 leading-snug">
|
||||
{note.title}
|
||||
</h3>
|
||||
)}
|
||||
<p className="mute text-sm leading-relaxed mb-4 flex-1 whitespace-pre-line line-clamp-6">
|
||||
{note.content}
|
||||
</p>
|
||||
<div className="flex items-center justify-between text-xs mute pt-3 border-t-soft">
|
||||
<span>{note.author}</span>
|
||||
<span>{formatDate(note.created_at)}</span>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NotesBlock({ notes, compact = false }) {
|
||||
if (!notes || notes.length === 0) return null;
|
||||
const items = compact ? notes.slice(0, 3) : notes;
|
||||
|
||||
return (
|
||||
<section className="container-wide pb-12">
|
||||
<div className="flex items-center justify-between mb-4 sm:mb-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageCircle className="w-4 h-4 mute" />
|
||||
<h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">
|
||||
Заметки редактора
|
||||
</h2>
|
||||
</div>
|
||||
{compact && notes.length > 3 && (
|
||||
<Link href="/notes" className="text-xs mute hover:ink transition-colors inline-flex items-center gap-1">
|
||||
Все <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
|
||||
{items.map(n => <NoteCard key={n.id} note={n} />)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user