function MainComponent() { const [uploads, setUploads] = React.useState([ { thumbnail: "path/to/thumbnail.jpg", title: "Video Title", description: "Short description of the video content..." }, { thumbnail: "path/to/thumbnail2.jpg", title: "Another Video Title", description: "Another short description of the video content..." } ]); const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const newUpload = { thumbnail: URL.createObjectURL(formData.get("video")), title: formData.get("title"), description: formData.get("description") }; setUploads([ newUpload, ...uploads ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] flex flex-col items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#323232] text-[#ffffff] py-4 flex justify-center", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "AI Tuber App")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 w-full flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-[800px] bg-[#ffffff] shadow-md rounded p-6 mt-6", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Upload Your Video"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "video", className: "p-2 border border-[#ccc] rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "Title", className: "p-2 border border-[#ccc] rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "description", placeholder: "Description", className: "p-2 border border-[#ccc] rounded h-[150px]", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#323232] text-[#ffffff] p-2 rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-upload mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), "Upload"))), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-[800px] bg-[#ffffff] shadow-md rounded p-6 mt-6", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Recent Uploads"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, uploads.map((upload, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-[#ccc] rounded flex items-center space-x-4", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: upload.thumbnail, alt: `Thumbnail of ${upload.title}`, className: "w-[100px] h-[100px] object-cover", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, upload.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, upload.description))))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#323232] text-[#ffffff] py-4 flex justify-center", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "© 2023 AI Tuber App"))); }