function MainComponent() { const [files, setFiles] = React.useState([]); const handleUpload = (event)=>{ event.preventDefault(); const uploadedFiles = Array.from(event.target.elements['file-upload'].files).map((file)=>({ name: file.name, size: file.size, uploadDate: new Date().toLocaleDateString(), uploadTime: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false }) })); setFiles((currentFiles)=>[ ...currentFiles, ...uploadedFiles ].sort((a, b)=>{ return new Date(a.uploadDate + ' ' + a.uploadTime) - new Date(b.uploadDate + ' ' + b.uploadTime); })); }; const formatFileSize = (bytes)=>{ if (bytes >= 1048576) return (bytes / 1048576).toFixed(2) + ' MB'; else if (bytes >= 1024) return (bytes / 1024).toFixed(2) + ' KB'; return bytes + ' bytes'; }; const filesByHour = files.reduce((acc, file)=>{ const hour = file.uploadTime.split(':')[0]; if (!acc[hour]) { acc[hour] = { files: [ file ], totalSize: file.size }; } else { acc[hour].files.push(file); acc[hour].totalSize += file.size; } return acc; }, {}); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f4f4f4] min-h-screen p-8", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4 text-[#333]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "File Organizer"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-6", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleUpload, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", id: "file-upload", name: "file-upload", multiple: true, className: "block w-full text-sm text-[#333] file:border file:border-[#ccc] file:rounded file:text-sm file:font-roboto file:px-4 file:py-2 file:bg-white file:text-[#666]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-4 py-2 bg-[#007bff] rounded text-white font-roboto hover:bg-[#0056b3] focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Upload"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-3 text-[#333]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Uploaded Files"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, Object.keys(filesByHour).map((hour, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "bg-white shadow rounded-lg p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg mb-2 text-[#666]", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Hour: ", hour), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#666]", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Total Size: ", formatFileSize(filesByHour[hour].totalSize)), /*#__PURE__*/ React.createElement("ul", { className: "mt-2", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, filesByHour[hour].files.map((file, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-sm font-roboto text-[#333] truncate", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, file.name, " - ", formatFileSize(file.size)))))))))); }