function MainComponent() { const windowStyle = "bg-white rounded-lg shadow-md p-4 mb-6 absolute"; const mdiHeaderStyle = "flex justify-between items-center bg-gray-200 p-2 rounded-t-md cursor-move"; const sampleData = [ [ "A", "B", "C", "D" ], [ 1, 2, 3, 4 ], [ 5, 6, 7, 8 ], [ 9, 10, 11, 12 ] ]; const onDragStart = (event, id)=>{ event.dataTransfer.setData("id", id); }; const onDragOver = (event)=>{ event.preventDefault(); }; const onDrop = (event)=>{ const id = event.dataTransfer.getData("id"); const draggableElement = document.getElementById(id); const dropzone = event.target; dropzone.appendChild(draggableElement); event.dataTransfer.clearData(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1da1f2] p-4 text-white flex items-center justify-between", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "MDI マルチウィンドウサンプル"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto mt-6 space-y-6 relative", onDragOver: onDragOver, onDrop: onDrop, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "spreadsheet-window", className: windowStyle, draggable: "true", onDragStart: (e)=>onDragStart(e, 'spreadsheet-window'), style: { top: '10px', left: '10px' }, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: mdiHeaderStyle, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "表計算ソフト風ウィンドウ"), /*#__PURE__*/ React.createElement("span", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 41, columnNumber: 46 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4 overflow-x-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full table-auto border-collapse", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, sampleData.map((row, rowIndex)=>{ const rowCells = row.map((cell, cellIndex)=>/*#__PURE__*/ React.createElement("td", { key: cellIndex, className: "border p-2 text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, cell)); return /*#__PURE__*/ React.createElement("tr", { key: rowIndex, __source: { fileName: "", lineNumber: 50, columnNumber: 26 }, __self: this }, rowCells); }))))), /*#__PURE__*/ React.createElement("div", { id: "3d-view-window", className: windowStyle, draggable: "true", onDragStart: (e)=>onDragStart(e, '3d-view-window'), style: { top: '20px', left: '300px' }, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: mdiHeaderStyle, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "3Dビューのウィンドウ"), /*#__PURE__*/ React.createElement("span", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 60, columnNumber: 46 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex justify-center items-center", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative-path-to-3d-view-image.jpg", alt: "3D view of a protein", className: "w-full h-[400px] object-contain", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, ` .cursor-move { cursor: move; } `)); }