function MainComponent() { const [directoryStructure, setDirectoryStructure] = React.useState(null); const handleUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const formData = new FormData(); formData.append('zipFile', file); const response = await fetch('/upload', { method: 'POST', body: formData }); if (response.ok) { const data = await response.json(); setDirectoryStructure(data); } } }; const handleDeleteAll = async ()=>{ const response = await fetch('/delete-all', { method: 'DELETE' }); if (response.ok) { setDirectoryStructure(null); } }; const renderTree = (structure)=>{ if (!structure) return null; return /*#__PURE__*/ React.createElement("ul", { className: "pl-4 list-disc", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, structure.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-1", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, item.type === 'file' ? /*#__PURE__*/ React.createElement("a", { href: item.path, className: "text-blue-500 underline", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, item.name) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.path, className: "text-blue-500 underline", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, item.name), item.children && renderTree(item.children))))); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white shadow-md rounded-lg p-6", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "アップしたzipファイルを整理してサーバー上に保存する"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "zipFile", className: "block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100", onChange: handleUpload, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "アップロード")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDeleteAll, className: "bg-red-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "全て削除")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, directoryStructure ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "ディレクトリを整理する"), renderTree(directoryStructure)) : /*#__PURE__*/ React.createElement("p", { className: "text-slate-500 font-roboto", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "No files uploaded yet.")))); }