41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { clsx } from "clsx";
|
|
import { memo } from "react";
|
|
|
|
interface ConflictOverlayProps {
|
|
/** Pixel left offset within the canvas */
|
|
left: number;
|
|
/** Pixel width */
|
|
width: number;
|
|
/** Row height */
|
|
height: number;
|
|
/** Conflict type */
|
|
type: "availability" | "overlap" | "budget";
|
|
message?: string;
|
|
}
|
|
|
|
export const ConflictOverlay = memo(function ConflictOverlay({ left, width, height, type, message }: ConflictOverlayProps) {
|
|
const colors = {
|
|
availability: "bg-red-400/30 border-red-400",
|
|
overlap: "bg-orange-400/30 border-orange-400",
|
|
budget: "bg-yellow-400/30 border-yellow-400",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"absolute border-2 rounded-md pointer-events-none",
|
|
"flex items-center justify-center",
|
|
colors[type],
|
|
)}
|
|
style={{ left, width, height, top: 4 }}
|
|
title={message}
|
|
>
|
|
<span className="text-xs font-medium text-red-700 bg-white/80 px-1 rounded">
|
|
{type === "availability" ? "⚡ conflict" : type === "overlap" ? "⚠ overlap" : "💰 over budget"}
|
|
</span>
|
|
</div>
|
|
);
|
|
});
|