yx-react-template/src/components/course-interactions/drag-drop/Draggable.tsx

import { useDraggable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
import { cn } from "@/lib/cn";
import styles from "./DragDrop.module.css";
import type { DraggableProps } from "./DragDrop.types";
import { useDragDropContext } from "./DragDropContext";

export function Draggable({
	id,
	children,
	disabled = false,
	data,
	className,
	style,
	...props
}: DraggableProps) {
	const { getScaledTransform, hasOverlay } = useDragDropContext();
	const { attributes, listeners, setNodeRef, transform, isDragging } =
		useDraggable({
			id,
			data,
			disabled,
		});
	const scaledTransform = getScaledTransform(transform);
	const state = {
		isDragging,
		disabled,
	};
	const resolvedClassName =
		typeof className === "function" ? className(state) : className;
	const resolvedChildren =
		typeof children === "function" ? children(state) : children;

	return (
		<div
			ref={setNodeRef}
			className={cn(
				styles.draggable,
				isDragging && styles.dragging,
				disabled && styles.disabled,
				resolvedClassName,
			)}
			style={{
				...style,
				transform: hasOverlay
					? style?.transform
					: CSS.Translate.toString(scaledTransform),
			}}
			{...attributes}
			{...listeners}
			{...props}
		>
			{resolvedChildren}
		</div>
	);
}