function MainComponent() { const [columnWidths, setColumnWidths] = React.useState({ artwork: 150, song: 200, album: 200, artist: 200, releaseDate: 150 }); const handleMouseDown = (e, column)=>{ const startX = e.pageX; const startWidth = columnWidths[column]; const handleMouseMove = (e)=>{ const currentX = e.pageX; const diffX = currentX - startX; setColumnWidths((prevWidths)=>({ ...prevWidths, [column]: Math.max(100, startWidth + diffX) })); }; const handleMouseUp = ()=>{ document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 overflow-auto", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block min-w-full", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-left table-auto", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-sm font-semibold text-[#121212] bg-[#F3F4F6]", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2", style: { width: columnWidths.artwork }, __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "アートワーク", /*#__PURE__*/ React.createElement("div", { className: "cursor-col-resize inline-block w-1 bg-gray-500 h-full float-right", onMouseDown: (e)=>handleMouseDown(e, 'artwork'), __source: { fileName: "", lineNumber: 29, columnNumber: 81 }, __self: this })), /*#__PURE__*/ React.createElement("th", { className: "p-2", style: { width: columnWidths.song }, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "曲名", /*#__PURE__*/ React.createElement("div", { className: "cursor-col-resize inline-block w-1 bg-gray-500 h-full float-right", onMouseDown: (e)=>handleMouseDown(e, 'song'), __source: { fileName: "", lineNumber: 30, columnNumber: 74 }, __self: this })), /*#__PURE__*/ React.createElement("th", { className: "p-2", style: { width: columnWidths.album }, __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "アルバム名", /*#__PURE__*/ React.createElement("div", { className: "cursor-col-resize inline-block w-1 bg-gray-500 h-full float-right", onMouseDown: (e)=>handleMouseDown(e, 'album'), __source: { fileName: "", lineNumber: 31, columnNumber: 78 }, __self: this })), /*#__PURE__*/ React.createElement("th", { className: "p-2", style: { width: columnWidths.artist }, __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "アーティスト名", /*#__PURE__*/ React.createElement("div", { className: "cursor-col-resize inline-block w-1 bg-gray-500 h-full float-right", onMouseDown: (e)=>handleMouseDown(e, 'artist'), __source: { fileName: "", lineNumber: 32, columnNumber: 81 }, __self: this })), /*#__PURE__*/ React.createElement("th", { className: "p-2", style: { width: columnWidths.releaseDate }, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "リリース日", /*#__PURE__*/ React.createElement("div", { className: "cursor-col-resize inline-block w-1 bg-gray-500 h-full float-right", onMouseDown: (e)=>handleMouseDown(e, 'releaseDate'), __source: { fileName: "", lineNumber: 33, columnNumber: 84 }, __self: this })))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./path-to-artwork.png", alt: "アートワーク画像", className: "w-12 h-12", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "曲名データ"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "アルバム名データ"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "アーティスト名データ"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "リリース日データ")))))); }