function MainComponent() { const [contents, setContents] = React.useState([]); const [title, setTitle] = React.useState(""); const [content, setContent] = React.useState(""); const [file, setFile] = React.useState(null); const handleFileChange = (e)=>{ setFile(e.target.files[0]); }; const handleSubmit = (e)=>{ e.preventDefault(); const newContent = { title, content, file }; setContents([ newContent, ...contents ]); setTitle(""); setContent(""); setFile(null); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Content Sharing Website"))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-6 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-6 sm:px-0", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg h-full border-4 border-dashed border-gray-200", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center my-4 text-xl font-semibold font-crimson-text", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Share your content"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "Title", className: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", value: title, onChange: (e)=>setTitle(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "content", rows: "5", placeholder: "Content", className: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", value: content, onChange: (e)=>setContent(e.target.value), __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "file", className: "block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-600 file:text-white hover:file:bg-indigo-700", onChange: handleFileChange, __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-indigo-600 text-white py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium font-roboto hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Share")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-gray-200 pb-5", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg leading-6 font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, "Recent Content")), /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, contents.map((contentItem, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "py-4 flex flex-col", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text text-gray-900 text-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 23 }, __self: this }, contentItem.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700 mt-2", __source: { fileName: "", lineNumber: 70, columnNumber: 23 }, __self: this }, contentItem.content), contentItem.file && /*#__PURE__*/ React.createElement("a", { href: URL.createObjectURL(contentItem.file), target: "_blank", rel: "noopener noreferrer", className: "mt-2 text-indigo-600 hover:text-indigo-900 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 25 }, __self: this }, contentItem.file.name)))))))))); }