blob: 811eae806f2743058e3e0c9e7545fb410abe4a7f (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import { handleExternalDroppedContent } from "@/lib/ExternalDroppedContent";
import {
BomttomLeftIcon,
BomttomRightIcon,
TopLeftIcon,
TopRightIcon,
} from "@repo/ui/icons";
import Image from "next/image";
import { useContext } from "react";
import { useEditor } from "tldraw";
import { DragContext } from "./tldrawComponent";
type CardData = {
title: string;
type: string;
content: string;
text: boolean;
};
function DropZone() {
const editor = useEditor();
const dragContext = useContext(DragContext);
if (!dragContext) {
throw new Error("Thinkpad must be used within a DragContextProvider");
}
const { isDraggingOver, setIsDraggingOver } = dragContext;
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
const data = event.dataTransfer.getData("application/json");
try {
const cardData: CardData = JSON.parse(data);
console.log("drop", cardData);
handleExternalDroppedContent({ editor, droppedData: cardData });
} catch (e) {
const textData = event.dataTransfer.getData("text/plain");
handleExternalDroppedContent({ editor, droppedData: textData });
}
setIsDraggingOver(false);
};
return (
<div
onDrop={handleDrop}
onDragOver={(e) => e.preventDefault()}
onDragLeave={() => setIsDraggingOver(false)}
className={`w-full absolute ${
isDraggingOver ? "z-[500]" : "z-[100] pointer-events-none"
} rounded-lg h-full flex items-center justify-center`}
>
{isDraggingOver && (
<>
<div className="absolute top-4 left-8">
<Image src={TopRightIcon} alt="" />
</div>
<div className="absolute top-4 right-8">
<Image src={TopLeftIcon} alt="" />
</div>
<div className="absolute bottom-4 left-8">
<Image src={BomttomLeftIcon} alt="" />
</div>
<div className="absolute bottom-4 right-8">
<Image src={BomttomRightIcon} alt="" />
</div>
</>
)}
</div>
);
}
export default DropZone;
|