43 lines
2.3 KiB
React
43 lines
2.3 KiB
React
|
import Badge from '../UI/Badge'
|
||
|
|
import { formatDate } from '../../utils/dateHelpers'
|
||
|
|
import useFocusStore from '../../store/useFocusStore'
|
||
|
|
|
||
|
|
export default function ProjectCard({ project, onEdit, onDelete }) {
|
||
|
|
const openFocus = useFocusStore(s => s.openFocus)
|
||
|
|
return (
|
||
|
|
<div className="bg-surface-elevated border border-surface-border rounded-lg overflow-hidden transition-all hover:border-gold/20">
|
||
|
|
<div className="h-1 w-full" style={{ backgroundColor: project.color }} />
|
||
|
|
<div className="p-3">
|
||
|
|
<div className="flex items-start justify-between mb-2">
|
||
|
|
<div className="flex items-center gap-2 min-w-0">
|
||
|
|
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
|
||
|
|
<span className="text-sm font-semibold text-text-primary truncate">{project.name}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-0.5 flex-shrink-0 ml-1">
|
||
|
|
<button onClick={() => onEdit(project)} className="text-text-muted hover:text-gold p-1 transition-colors text-sm">✎</button>
|
||
|
|
<button onClick={() => onDelete(project)} className="text-text-muted hover:text-red-400 p-1 transition-colors text-sm">✕</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{project.description && (
|
||
|
|
<p className="text-xs text-text-muted mb-2 line-clamp-1">{project.description}</p>
|
||
|
|
)}
|
||
|
|
<div className="space-y-1">
|
||
|
|
{(project.deliverables || []).map(d => (
|
||
|
|
<button key={d.id} onClick={() => openFocus(project.id, d.id)}
|
||
|
|
className="w-full flex items-center justify-between text-xs bg-surface rounded px-2 py-1.5 border border-transparent hover:border-gold/20 hover:bg-surface-border/20 transition-all text-left group">
|
||
|
|
<span className="text-text-muted group-hover:text-text-primary truncate flex-1 pr-2">{d.title}</span>
|
||
|
|
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||
|
|
<span className="text-text-muted/60 font-mono text-[9px]">{formatDate(d.due_date)}</span>
|
||
|
|
<Badge status={d.status} />
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
{(!project.deliverables || project.deliverables.length === 0) && (
|
||
|
|
<p className="text-[11px] text-text-muted/40 italic text-center py-1">No deliverables</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|