38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { NotebookPen } from "lucide-react";
|
|
|
|
import { getGroupColor } from "@/lib/colors";
|
|
import { cn } from "@/lib/utils";
|
|
import type { GroupDTO } from "@/types/board";
|
|
|
|
/**
|
|
* Purely presentational stand-in rendered inside <DragOverlay>. The real
|
|
* GroupCard stays mounted (and wired to useSortable) at its slot while
|
|
* dragging; re-mounting that same interactive component a second time here
|
|
* would register a second useSortable/useDraggable for the same id.
|
|
*/
|
|
export function GroupCardOverlay({ group }: { group: GroupDTO }) {
|
|
const { resolvedTheme } = useTheme();
|
|
const color = getGroupColor(group.color);
|
|
const borderColor = resolvedTheme === "dark" ? color.dark : color.light;
|
|
|
|
return (
|
|
<div
|
|
style={{ borderColor }}
|
|
className={cn(
|
|
"rotate-1 scale-105 cursor-grabbing rounded-xl border-[3px] bg-card p-3 shadow-lg"
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between gap-1">
|
|
<h3 className="min-w-0 flex-1 truncate pt-1 text-sm font-semibold">{group.title}</h3>
|
|
<NotebookPen className="size-4 shrink-0 text-muted-foreground" />
|
|
</div>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
{group.todos.length} to-do{group.todos.length === 1 ? "" : "s"}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|