function MainComponent() { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [selectedFile, setSelectedFile] = useState(null); const [upload, { loading: uploadLoading }] = useUpload(); const [error, setError] = useState(null); const handleSubmit = useCallback(async (e)=>{ e.preventDefault(); let imageUrl = null; if (selectedFile) { const result = await upload({ file: selectedFile }); if (result.error) { setError(result.error); return; } imageUrl = result.url; } // You'll need to setup a datastore to save this data const data = { title, description, imageUrl, createdAt: new Date().toISOString() }; setTitle(""); setDescription(""); setSelectedFile(null); }, [ title, description, selectedFile, upload ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full mx-auto space-y-8", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-3xl font-extrabold text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Create New Item")), /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "title", type: "text", required: true, className: "appearance-none rounded relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", placeholder: "Title", value: title, onChange: (e)=>setTitle(e.target.value), __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "description", required: true, className: "appearance-none rounded relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", placeholder: "Description", rows: "4", value: description, onChange: (e)=>setDescription(e.target.value), __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "file", type: "file", accept: "image/*", className: "appearance-none rounded relative block w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", onChange: (e)=>setSelectedFile(e.target.files[0]), __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: uploadLoading, className: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, uploadLoading ? "Creating..." : "Create"))))); }