type UseIdeaPaneDropImage = {
    isDragging: boolean;
    dragAndDropEvents: {
        onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
        onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
        onDrop: (event: React.DragEvent<HTMLDivElement>) => Promise<void>;
    };
};

export const useIdeaPaneDropImage = (): UseIdeaPaneDropImage => {
    const [isDragging, setIsDragging] = React.useState(false);

    const onDragOver = (event: React.DragEvent<HTMLDivElement>): void => {
        setIsDragging(true);
    };

    const onDragLeave = (event: React.DragEvent<HTMLDivElement>): void => {
        setIsDragging(false);
    };

    const onDrop = async (
        event: React.DragEvent<HTMLDivElement>
    ): Promise<void> => {
        // not part of this article
    };

    const dragAndDropEvents = {
        onDragOver,
        onDragLeave,
        onDrop,
    };

    return { isDragging, dragAndDropEvents };
};
React hook for dragging files
