blob: cc31246e71271aa48309b148ce12ab13c8469680 (
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
|
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}
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>
);
}
|