function MainComponent() { const [theme, setTheme] = React.useState('light'); const [posts, setPosts] = React.useState([ { id: 1, type: 'text', content: 'This is a sample post on your feed!' }, { id: 2, type: 'image', content: '/path/to/image.jpg' }, { id: 3, type: 'video', content: '/path/to/video.mp4' } ]); const [postContent, setPostContent] = React.useState(''); const handleThemeToggle = ()=>{ setTheme(theme === 'light' ? 'dark' : 'light'); }; const handlePostContentChange = (e)=>{ setPostContent(e.target.value); }; const handleSubmitPost = (e)=>{ e.preventDefault(); const newPost = { id: Date.now(), type: 'text', content: postContent }; setPosts([ newPost, ...posts ]); setPostContent(''); }; return /*#__PURE__*/ React.createElement("div", { className: `w-full h-full ${theme === 'light' ? 'bg-white' : 'bg-black'} transition-colors duration-300`, __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1DA1F2] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-white text-xl", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Social Media Feed"), /*#__PURE__*/ React.createElement("button", { className: "text-white", onClick: handleThemeToggle, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, theme === 'light' ? '🌙' : '☀️')), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-gray-300 dark:border-gray-700 mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmitPost, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "postContent", className: "w-full p-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-black text-black dark:text-white resize-none", rows: "4", placeholder: "What’s happening?", value: postContent, onChange: handlePostContentChange, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 mt-2", type: "submit", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Post"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("li", { key: post.id, className: "mb-4 bg-white dark:bg-black", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b dark:border-gray-700", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, post.type === 'text' ? /*#__PURE__*/ React.createElement("p", { className: "text-black dark:text-white", __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, post.content) : post.type === 'image' ? /*#__PURE__*/ React.createElement("img", { src: post.content, alt: "Posted content image", className: "w-full", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }) : /*#__PURE__*/ React.createElement("video", { controls: true, className: "w-full", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: post.content, type: "video/mp4", __source: { fileName: "", lineNumber: 60, columnNumber: 23 }, __self: this }))))))))); }