35 lines
1.5 KiB
React
35 lines
1.5 KiB
React
|
import Badge from '../UI/Badge'
|
||
|
|
import { formatDate } from '../../utils/dateHelpers'
|
||
|
|
|
||
|
|
export default function DeliverableCard({ deliverable, isActive, index, projectColor, onEdit }) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={() => isActive && onEdit && onEdit(deliverable)}
|
||
|
|
className={`relative flex flex-col gap-2 rounded-xl border p-4 min-w-[190px] max-w-[230px] flex-shrink-0 transition-all duration-300 select-none
|
||
|
|
${isActive
|
||
|
|
? 'border-gold bg-surface-elevated shadow-gold scale-105 ring-2 ring-gold/30 cursor-pointer'
|
||
|
|
: 'border-surface-border bg-surface cursor-default'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{isActive && (
|
||
|
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-gold text-surface text-[9px] font-black px-2.5 py-0.5 rounded-full tracking-widest uppercase">
|
||
|
|
Selected
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="flex items-center gap-1.5">
|
||
|
|
<div className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: projectColor }} />
|
||
|
|
<span className={`text-[10px] font-semibold uppercase tracking-widest ${isActive ? 'text-gold' : 'text-text-muted/60'}`}>
|
||
|
|
Deliverable {index + 1}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className={`text-sm font-semibold leading-snug ${isActive ? 'text-text-primary' : 'text-text-muted'}`}>
|
||
|
|
{deliverable.title}
|
||
|
|
</p>
|
||
|
|
<p className={`text-xs font-mono ${isActive ? 'text-gold' : 'text-text-muted/50'}`}>
|
||
|
|
{formatDate(deliverable.due_date)}
|
||
|
|
</p>
|
||
|
|
<Badge status={deliverable.status} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|