import { NotSupported } from 'components'; import run, { hasSupport } from '../../apis/drag-and-drop'; function FullScreen() { if (!hasSupport()) { return <NotSupported />; } return ( <div className=" tw-flex tw-space-x-4 " > <div id="js-drag--area-1" className=" tw-flex tw-p-2 tw-w-[100px] tw-h-[100px] tw-border-2 tw-border-blue-500 tw-rounded-xl tw-transition tw-ease-in tw-duration-150 " onDrop={run.onDrop} onDragOver={run.onDragOver} onDragEnter={run.onDragEnter} onDragLeave={run.onDragLeave} > <div id="js-drag--box" className=" tw-flex tw-w-full tw-h-full tw-bg-blue-500 tw-rounded-lg tw-cursor-[grab] " draggable onDragStart={run.onDrag} /> </div> <div id="js-drag--area-2" className=" tw-flex tw-p-2 tw-w-[100px] tw-h-[100px] tw-border-2 tw-border-blue-100 tw-rounded-xl tw-transition tw-ease-in tw-duration-150 " onDrop={run.onDrop} onDragOver={run.onDragOver} onDragEnter={run.onDragEnter} onDragLeave={run.onDragLeave} /> <div id="js-drag--area-3" className=" tw-flex tw-p-2 tw-w-[100px] tw-h-[100px] tw-border-2 tw-border-blue-100 tw-rounded-xl tw-transition tw-ease-in tw-duration-150 " onDrop={run.onDrop} onDragOver={run.onDragOver} onDragEnter={run.onDragEnter} onDragLeave={run.onDragLeave} /> <div id="js-drag--area-4" className=" tw-flex tw-p-2 tw-w-[100px] tw-h-[100px] tw-border-2 tw-border-blue-100 tw-rounded-xl tw-transition tw-ease-in tw-duration-150 " onDrop={run.onDrop} onDragOver={run.onDragOver} onDragEnter={run.onDragEnter} onDragLeave={run.onDragLeave} /> </div> ); } export default FullScreen;