46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { ReactNode } from "react";
|
|
import { useSortable } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { GripVertical } from "lucide-react";
|
|
|
|
interface DraggableItemProps {
|
|
id: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export default function DraggableItem({ id, children }: DraggableItemProps) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({ id });
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className={`bg-white border border-gray-200 rounded-lg p-4 mb-3 flex items-center gap-3 shadow-sm hover:shadow-md transition-shadow ${
|
|
isDragging ? "cursor-grabbing" : "cursor-grab"
|
|
}`}
|
|
>
|
|
<div
|
|
{...attributes}
|
|
{...listeners}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
<GripVertical size={20} />
|
|
</div>
|
|
<div className="flex-1">{children}</div>
|
|
</div>
|
|
);
|
|
}
|