function MainComponent({ label, files, onPull, onFetch, onOrganize, onStore, onUpload }) { const handlePull = ()=>{ onPull(); }; const handleFetch = ()=>{ onFetch(); }; const handleOrganize = ()=>{ onOrganize(); }; const handleStore = ()=>{ onStore(); }; const handleFileUpload = (event)=>{ onUpload(event.target.files); }; return /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-md shadow-lg bg-white max-w-lg mx-auto my-8", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold text-xl text-gray-800", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, label), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "bg-blue-500 text-white p-2 rounded-md cursor-pointer", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Upload"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", onChange: handleFileUpload, multiple: true, accept: ".vdi", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 text-white p-2 rounded-md", onClick: handleFetch, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Fetch"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-green-500 text-white p-2 rounded-md", onClick: handlePull, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Pull"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-yellow-500 text-white p-2 rounded-md", onClick: handleOrganize, __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Organize"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-purple-500 text-white p-2 rounded-md", onClick: handleStore, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Store"))), /*#__PURE__*/ React.createElement("ul", { className: "my-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, files.map((file, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "my-2 flex items-center justify-between", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f3f4f6] p-2 rounded-full text-[#9ca3af]", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-file", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "ml-3 font-medium text-gray-600", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, file.name)), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-gray-500", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, file.size))))); } function StoryComponent() { const [vdiFiles, setVdiFiles] = React.useState([ { name: "Windows 10.vdi", size: "15 GB" }, { name: "Linux Ubuntu.vdi", size: "8 GB" }, { name: "Android.vdi", size: "6 GB" } ]); const handlePull = ()=>{ // Logic to pull new VDI files }; const handleFetch = ()=>{ // Logic to fetch VDI files }; const handleOrganize = ()=>{ // Logic to organize VDI files }; const handleStore = ()=>{ // Logic to store VDI files }; const handleUpload = (uploadedFiles)=>{ // Logic to handle file upload, assume that we append to current files const newFiles = Array.from(uploadedFiles).map((file)=>({ name: file.name, size: `${(file.size / 1024 / 1024).toFixed(2)} MB` })); setVdiFiles((prevFiles)=>[ ...prevFiles, ...newFiles ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { label: "Cloud Storage for VDI Files", files: vdiFiles, onPull: handlePull, onFetch: handleFetch, onOrganize: handleOrganize, onStore: handleStore, onUpload: handleUpload, __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this })); }