function MainComponent() { const [dragging, setDragging] = React.useState(false); const dragRef = React.useRef(null); const handleDragIn = (e)=>{ e.preventDefault(); e.stopPropagation(); }; const handleDragOut = (e)=>{ e.preventDefault(); e.stopPropagation(); setDragging(false); }; const handleDragOver = (e)=>{ e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.items && e.dataTransfer.items.length > 0) { setDragging(true); } }; const handleDrop = (e)=>{ e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { // Process file here e.dataTransfer.clearData(); setDragging(false); } }; React.useEffect(()=>{ let div = dragRef.current; div.addEventListener('dragenter', handleDragIn); div.addEventListener('dragleave', handleDragOut); div.addEventListener('dragover', handleDragOver); div.addEventListener('drop', handleDrop); return function cleanup() { div.removeEventListener('dragenter', handleDragIn); div.removeEventListener('dragleave', handleDragOut); div.removeEventListener('dragover', handleDragOver); div.removeEventListener('drop', handleDrop); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "user-id", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "User ID"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "user-id", type: "text", placeholder: "User ID", name: "userId", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "address", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Address"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "address", type: "text", placeholder: "Address", name: "address", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "age", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Age"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "age", type: "number", placeholder: "Age", name: "age", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", ref: dragRef, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "photo-upload", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Photo Upload"), /*#__PURE__*/ React.createElement("div", { className: "py-2 px-3 text-gray-700 w-full flex justify-center items-center border-2 rounded-lg border-dashed border-gray-400", style: { minHeight: '150px', borderColor: dragging ? '#4A90E2' : undefined }, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, dragging ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 67, columnNumber: 25 }, __self: this }, "Drop the files here ...") : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 67, columnNumber: 58 }, __self: this }, "Drag 'n' drop some files here, or click to select files")), /*#__PURE__*/ React.createElement("input", { className: "hidden", id: "photo-upload", type: "file", name: "photoUpload", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Submit")))); }