function MainComponent({ onFileUpload, isUploading, uploadedFiles }) { const handleFileChange = (event)=>{ const files = event.target.files; if (files.length > 0) { onFileUpload(files); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white shadow-md rounded w-full max-w-lg", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-4 text-2xl font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Upload Inventory Documents"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "inventoryFiles", accept: ".xlsx, .xls, .pdf", onChange: handleFileChange, className: "block w-full px-4 py-2 mb-4 text-sm text-gray-700 bg-gray-50 border border-gray-300 rounded focus:outline-none focus:border-blue-500", disabled: isUploading, multiple: true, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), isUploading && /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-gray-500", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Uploading..."), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, uploadedFiles.map((file, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 bg-white border border-gray-200 shadow-sm rounded flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-800 truncate", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, file.name)))))); } function StoryComponent() { const [isUploading, setIsUploading] = React.useState(false); const [uploadedFiles, setUploadedFiles] = React.useState([]); const handleFileUpload = (files)=>{ setIsUploading(true); console.log('Uploading files:', Array.from(files).map((f)=>f.name)); // Simulate an API call with a delay setTimeout(()=>{ console.log('Files uploaded:', Array.from(files).map((f)=>f.name)); setUploadedFiles((prevFiles)=>[ ...prevFiles, ...Array.from(files) ]); setIsUploading(false); }, 1500); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onFileUpload: handleFileUpload, isUploading: isUploading, uploadedFiles: uploadedFiles, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); }