ArticleCard

'use client'
import { useState } from 'react'

const ARTICLES = [
  { id: 1, title: 'Building a 100-Component UI Library in 2 Weeks with AI', excerpt: 'How we used Claude Code and Groq to generate 100+ production-ready React components in record time, and the lessons learned along the way.', category: 'Tutorial', readTime: 8, author: 'Thomas G.', authorInitials: 'TG', color: '#C9A84C', tags: ['React', 'AI', 'Next.js'] },
  { id: 2, title: 'Why MCP is the Future of Component Discovery', excerpt: 'The Model Context Protocol unlocks a new paradigm: letting your AI assistant browse, search, and inject UI components directly into your editor.', category: 'Opinion', readTime: 5, author: 'Sarah C.', authorInitials: 'SC', color: '#6366f1', tags: ['MCP', 'Claude', 'DX'] },
  { id: 3, title: 'Dark Mode First: A Design Philosophy', excerpt: "Empire UI is built dark-mode-first because dark themes aren't an afterthought — they're the primary user experience for developers.", category: 'Design', readTime: 4, author: 'Priya P.', authorInitials: 'PP', color: '#22c55e', tags: ['Design', 'CSS', 'UX'] },
]

export default function ArticleCard() {
  const [saved, setSaved] = useState<Set<number>>(new Set())

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: 24, background: '#0A0A0A' }}>
      {ARTICLES.map(a => (
        <div key={a.id} style={{ background: '#0F0F0F', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16, overflow: 'hidden', display: 'flex' }}>
          {/* Cover */}
          <div style={{ width: 140, flexShrink: 0, background: `linear-gradient(135deg, ${a.color}20, ${a.color}08)`, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: '1px solid rgba(255,255,255,0.04)' }}>
            <span style={{ fontSize: 32, color: a.color }}>{a.category === 'Tutorial' ? '📖' : a.category === 'Opinion' ? '💡' : '🎨'}</span>
          </div>

          {/* Content */}
          <div style={{ flex: 1, padding: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                <span style={{ background: a.color + '18', color: a.color, border: `1px solid ${a.color}30`, padding: '2px 8px', borderRadius: 20, fontSize: 11, fontWeight: 600 }}>{a.category}</span>
                {a.tags.map(tag => (
                  <span key={tag} style={{ background: 'rgba(255,255,255,0.05)', color: 'rgba(255,255,255,0.4)', padding: '2px 7px', borderRadius: 20, fontSize: 10 }}>{tag}</span>
                ))}
              </div>
              <button onClick={() => setSaved(s => { const n = new Set(s); s.has(a.id) ? n.delete(a.id) : n.add(a.id); return n })}
                style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 18, flexShrink: 0 }}>
                {saved.has(a.id) ? '🔖' : '🏷'}
              </button>
            </div>

            <div style={{ color: '#F5F5F0', fontSize: 15, fontWeight: 700, lineHeight: 1.4, marginBottom: 8 }}>{a.title}</div>
            <div style={{ color: 'rgba(255,255,255,0.45)', fontSize: 12, lineHeight: 1.6, marginBottom: 14 }}>{a.excerpt}</div>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: a.color, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0A0A0A', fontSize: 9, fontWeight: 800 }}>{a.authorInitials}</div>
                <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 12 }}>{a.author}</span>
              </div>
              <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: 12 }}>{a.readTime} min read</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

About

Rich article/blog card with cover image placeholder, tags, read time, author, and save button