82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import type { Card, Column, Label } from "@/types/board";
|
|
import { LabelDots } from "@/components/board/LabelDots";
|
|
import { ChecklistBar } from "@/components/board/ChecklistBar";
|
|
import { format, isPast, isToday } from "date-fns";
|
|
|
|
interface CardOverlayProps {
|
|
card: Card;
|
|
boardLabels: Label[];
|
|
}
|
|
|
|
export function CardOverlay({ card, boardLabels }: CardOverlayProps) {
|
|
const hasDueDate = card.dueDate != null;
|
|
const dueDate = hasDueDate ? new Date(card.dueDate!) : null;
|
|
const overdue = dueDate != null && isPast(dueDate) && !isToday(dueDate);
|
|
|
|
return (
|
|
<div className="w-[260px] rotate-2 scale-[1.03] rounded-lg bg-pylon-surface p-3 opacity-90 shadow-xl">
|
|
{/* Label dots */}
|
|
{card.labels.length > 0 && (
|
|
<div className="mb-2">
|
|
<LabelDots labelIds={card.labels} boardLabels={boardLabels} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Card title */}
|
|
<p className="text-sm font-medium text-pylon-text">{card.title}</p>
|
|
|
|
{/* Footer row: due date + checklist */}
|
|
{(hasDueDate || card.checklist.length > 0) && (
|
|
<div className="mt-2 flex items-center gap-3">
|
|
{dueDate && (
|
|
<span
|
|
className={`font-mono text-xs ${
|
|
overdue
|
|
? "rounded bg-pylon-danger/10 px-1 py-0.5 text-pylon-danger"
|
|
: "text-pylon-text-secondary"
|
|
}`}
|
|
>
|
|
{format(dueDate, "MMM d")}
|
|
</span>
|
|
)}
|
|
{card.checklist.length > 0 && (
|
|
<ChecklistBar checklist={card.checklist} />
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ColumnOverlayProps {
|
|
column: Column;
|
|
}
|
|
|
|
export function ColumnOverlay({ column }: ColumnOverlayProps) {
|
|
return (
|
|
<div className="w-[280px] rotate-1 scale-[1.02] rounded-lg bg-pylon-column p-3 opacity-90 shadow-xl">
|
|
<div className="flex items-center gap-2 border-b border-border pb-2">
|
|
<span className="truncate font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
|
|
{column.title}
|
|
</span>
|
|
<span className="shrink-0 font-mono text-xs text-pylon-text-secondary">
|
|
{column.cardIds.length}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 space-y-1">
|
|
{column.cardIds.slice(0, 3).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="h-6 rounded bg-pylon-surface/50"
|
|
/>
|
|
))}
|
|
{column.cardIds.length > 3 && (
|
|
<p className="text-center font-mono text-xs text-pylon-text-secondary">
|
|
+{column.cardIds.length - 3} more
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|