blob: 4d72995bc9237c58bdb504a9016d34fed08da593 (
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
|
import Image from "next/image";
import { useRef, useState } from "react";
import { motion } from "framer-motion";
export default function DraggableComponentsContainer({
content,
}: {
content: { context: string }[] | undefined;
}) {
if (content === undefined) return null;
return (
<div className="flex flex-col gap-10">
{content.map((i) => {
return <DraggableComponents content={i.context} />;
})}
</div>
);
}
function DraggableComponents({ content }: { content: string }) {
const [isDragging, setIsDragging] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
setIsDragging(true);
if (containerRef.current) {
// Serialize the children as a string for dataTransfer
const childrenHtml = containerRef.current.innerHTML;
event.dataTransfer.setData("text/html", childrenHtml);
}
};
const handleDragEnd = () => {
setIsDragging(false);
};
return (
<motion.div
initial={{ opacity: 0, y: 5 }}
animate={{ opacity: 1, y: 0 }}
ref={containerRef}
onDragEnd={handleDragEnd}
// @ts-expect-error TODO: fix this
onDragStart={handleDragStart}
draggable
className={`flex gap-4 px-3 overflow-hidden rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
>
<div className="flex flex-col gap-2">
<div>
<h1 className="line-clamp-3">{content}</h1>
</div>
{/* <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p> */}
</div>
</motion.div>
);
}
|