function MainComponent() { const [selectedFile, setSelectedFile] = React.useState(null); const [isModalOpen, setIsModalOpen] = React.useState(false); const fileList = [ { id: 'file-AY6iEsOzL6IBjYjKSiiEi7AYz', name: '三つ折チラシの使い方.pdf', createdAt: '2024/4/18 7:06' } ]; const handleFileClick = (file)=>{ setSelectedFile(file); }; const handleUpload = (event)=>{ event.preventDefault(); // Handle the upload logic }; const fileElements = fileList.map((file)=>/*#__PURE__*/ React.createElement("div", { key: file.id, className: "py-2 px-4 rounded hover:bg-[#374151] cursor-pointer", onClick: ()=>handleFileClick(file), __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, file.name, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, file.createdAt))); const fileDetailElements = selectedFile && /*#__PURE__*/ React.createElement("div", { className: "text-white space-y-3", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, selectedFile.name), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-barcode mr-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, selectedFile.id)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar mr-2", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, selectedFile.createdAt))); const modal = /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 bg-[#00000080] flex justify-center items-center ${isModalOpen ? '' : 'hidden'}`, __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-[#1F2937] p-6 rounded-lg text-center w-full max-w-md", onSubmit: handleUpload, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-white mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Upload a File"), /*#__PURE__*/ React.createElement("div", { className: "border-dashed border-2 border-gray-600 p-6 rounded-md mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "cursor-pointer", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cloud-upload-alt fa-3x text-gray-400", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400 mt-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Upload a file or drag and drop here (.jsonl)")), /*#__PURE__*/ React.createElement("input", { id: "file-upload", name: "file", type: "file", className: "hidden", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("input", { name: "name", placeholder: "Name", className: "text-white bg-[#374151] mb-4 p-2 w-full rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-red-600 text-white py-2 px-4 rounded mr-2", onClick: ()=>setIsModalOpen(false), __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-600 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Upload")))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row h-screen", __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full lg:w-1/3 bg-[#1F2937] p-4 text-white overflow-hidden", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Storage"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, fileElements)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#111827] p-4 lg:border-l border-[#374151] overflow-hidden", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "File details"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-600 text-white py-2 px-4 rounded flex items-center", onClick: ()=>setIsModalOpen(true), __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }), " Upload")), fileDetailElements), modal); }