+ {D.blogArticles.map((post, i) => {
+ const c = BLOG_COLORS[post.color] || BLOG_COLORS.violet;
+ return (
+
setActive(post.slug)}
+ style={{
+ background: "var(--bg-card)", border: "1px solid var(--line)",
+ borderRadius: "var(--radius)", padding: "28px 32px",
+ cursor: "pointer", transition: "border-color 0.15s, background 0.15s",
+ display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center",
+ }}
+ onMouseEnter={e => { e.currentTarget.style.borderColor = c.border; e.currentTarget.style.background = c.bg; }}
+ onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.background = "var(--bg-card)"; }}
+ >
+
+
+ {post.category}
+
+ {post.date} · {post.readTime} read
+
+
+
+ {post.title}
+
+
+ {post.excerpt}
+
+
+
→
+