40 lines
1.5 KiB
TypeScript
40 lines
1.5 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 isDark = resolvedTheme === "dark";
|
|
const borderColor = isDark ? color.dark : color.light;
|
|
const backgroundColor = isDark
|
|
? `color-mix(in srgb, ${color.dark} 18%, var(--card))`
|
|
: `color-mix(in srgb, ${color.light} 12%, var(--card))`;
|
|
|
|
return (
|
|
<div
|
|
style={{ borderColor, backgroundColor }}
|
|
className={cn("rotate-1 scale-105 cursor-grabbing rounded-xl border-[3px] 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>
|
|
);
|
|
}
|