ProjectCard

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

export default function ProjectCard() {
  const [starred, setStarred] = useState(false);
  const project = {
    name: 'Empire Design System',
    desc: 'Building the next-gen component library for all products',
    progress: 68,
    status: 'active',
    tags: ['Design', 'Frontend', 'Q2'],
    team: ['A', 'B', 'C', 'D'],
    dueDate: 'Jun 15',
    tasks: { done: 34, total: 50 },
  };

  return (
    <div style={{
      fontFamily: 'system-ui, sans-serif',
      background: '#111',
      border: '1px solid rgba(255,255,255,0.08)',
      borderRadius: '20px',
      padding: '24px',
      maxWidth: '380px',
      position: 'relative',
      transition: 'box-shadow 0.3s ease',
    }}
      onMouseEnter={e => e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.4)'}
      onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '14px' }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
            <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#4ade80', display: 'inline-block', boxShadow: '0 0 8px #4ade80' }} />
            <span style={{ color: 'rgba(245,245,240,0.4)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Active</span>
          </div>
          <h3 style={{ color: '#F5F5F0', margin: '0 0 6px 0', fontSize: '16px', fontWeight: 700 }}>{project.name}</h3>
          <p style={{ color: 'rgba(245,245,240,0.5)', margin: 0, fontSize: '13px', lineHeight: 1.5 }}>{project.desc}</p>
        </div>
        <button onClick={() => setStarred(s => !s)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '20px', color: starred ? '#C9A84C' : 'rgba(245,245,240,0.2)', transition: 'color 0.2s' }}>★</button>
      </div>
      <div style={{ display: 'flex', gap: '6px', marginBottom: '16px', flexWrap: 'wrap' }}>
        {project.tags.map(tag => (
          <span key={tag} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.09)', borderRadius: '6px', padding: '3px 10px', color: 'rgba(245,245,240,0.6)', fontSize: '11px' }}>{tag}</span>
        ))}
      </div>
      <div style={{ marginBottom: '16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
          <span style={{ color: 'rgba(245,245,240,0.5)', fontSize: '12px' }}>Progress</span>
          <span style={{ color: '#C9A84C', fontSize: '12px', fontWeight: 700 }}>{project.progress}%</span>
        </div>
        <div style={{ height: '6px', background: 'rgba(255,255,255,0.07)', borderRadius: '3px', overflow: 'hidden' }}>
          <div style={{ height: '100%', width: `${project.progress}%`, background: 'linear-gradient(90deg, #C9A84C, #e8c96d)', borderRadius: '3px' }} />
        </div>
        <p style={{ margin: '6px 0 0 0', color: 'rgba(245,245,240,0.3)', fontSize: '11px' }}>{project.tasks.done}/{project.tasks.total} tasks completed</p>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex' }}>
          {project.team.map((m, i) => (
            <div key={i} style={{
              width: '28px', height: '28px', borderRadius: '50%',
              background: ['#C9A84C', '#6366f1', '#4ade80', '#f472b6'][i % 4],
              border: '2px solid #111', marginLeft: i === 0 ? 0 : '-8px',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: '11px', fontWeight: 700, color: '#0A0A0A',
            }}>{m}</div>
          ))}
        </div>
        <span style={{ color: 'rgba(245,245,240,0.35)', fontSize: '12px' }}>Due {project.dueDate}</span>
      </div>
    </div>
  );
}

Component info

About

Project status card with progress and team avatars