function MainComponent({ onFileSelect, accept = "image/*", label = "Choose a file" }) { const [preview, setPreview] = useState(null); const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const handleFileChange = useCallback(async (e)=>{ const file = e.target.files?.[0]; if (!file) return; try { const reader = new FileReader(); reader.onloadend = ()=>{ setPreview(reader.result); }; reader.readAsDataURL(file); const { url, error } = await upload({ file }); if (error) { setError(error); return; } if (onFileSelect) { onFileSelect(url); } } catch (err) { setError("Failed to process file"); } }, [ onFileSelect, upload ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block w-full px-4 py-2 text-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-blue-500 transition-colors", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", accept: accept, onChange: handleFileChange, disabled: loading, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, loading ? "Uploading..." : label)), error && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-red-500 text-sm", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, error), preview && /*#__PURE__*/ React.createElement("div", { className: "mt-4 relative w-full pt-[100%]", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: preview, alt: "File preview", className: "absolute top-0 left-0 w-full h-full object-contain rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }))); } function StoryComponent() { const [fileUrl, setFileUrl] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onFileSelect: setFileUrl, accept: "image/*,video/*,application/pdf", label: "Drop your file here or click to browse", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, fileUrl && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "File URL: ", fileUrl))); }