function NewComponent({ users, currentUser, posts, onLogin, onLogout, onPostSubmit, onLike, newPost, onNewPostChange }) { const handleFormSubmit = (e)=>{ e.preventDefault(); onLogin(e.target.username.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-300 p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-pink-500", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Insta-Clone")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto mt-8 px-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, !currentUser ? /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Enter your username", className: "w-full px-3 py-2 border border-gray-300 rounded-md mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "Log In"))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Welcome, ", currentUser, "!"), /*#__PURE__*/ React.createElement("button", { onClick: onLogout, className: "bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Logout")), /*#__PURE__*/ React.createElement("form", { onSubmit: onPostSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "post", value: newPost, onChange: onNewPostChange, placeholder: "What's on your mind?", className: "w-full px-3 py-2 border border-gray-300 rounded-md mb-2", rows: "3", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Post")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, posts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, post.user), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onLike(index), className: "text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart mr-1", __source: { fileName: "", lineNumber: 58, columnNumber: 21 }, __self: this }), " ", post.likes, " Likes"))))))); } function NewComponentStory() { const [users, setUsers] = React.useState([]); const [currentUser, setCurrentUser] = React.useState(null); const [posts, setPosts] = React.useState([]); const [newPost, setNewPost] = React.useState(''); const handleLogin = (username)=>{ if (username.trim() !== '') { setCurrentUser(username); if (!users.includes(username)) { setUsers([ ...users, username ]); } } }; const handleLogout = ()=>{ setCurrentUser(null); }; const handlePostSubmit = (e)=>{ e.preventDefault(); if (newPost.trim() !== '') { setPosts([ ...posts, { user: currentUser, content: newPost, likes: 0 } ]); setNewPost(''); } }; const handleLike = (index)=>{ const updatedPosts = [ ...posts ]; updatedPosts[index].likes += 1; setPosts(updatedPosts); }; const handleNewPostChange = (e)=>{ setNewPost(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { users: users, currentUser: currentUser, posts: posts, onLogin: handleLogin, onLogout: handleLogout, onPostSubmit: handlePostSubmit, onLike: handleLike, newPost: newPost, onNewPostChange: handleNewPostChange, __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this })); } function MainComponent() { const [users, setUsers] = React.useState([]); const [currentUser, setCurrentUser] = React.useState(null); const [posts, setPosts] = React.useState([]); const [newPost, setNewPost] = React.useState(''); const handleLogin = (username)=>{ if (username.trim() !== '') { setCurrentUser(username); if (!users.includes(username)) { setUsers([ ...users, username ]); } } }; const handleLogout = ()=>{ setCurrentUser(null); }; const handlePostSubmit = (e)=>{ e.preventDefault(); if (newPost.trim() !== '') { setPosts([ ...posts, { user: currentUser, content: newPost, likes: 0 } ]); setNewPost(''); } }; const handleLike = (index)=>{ const updatedPosts = [ ...posts ]; updatedPosts[index].likes += 1; setPosts(updatedPosts); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-300 p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-pink-500", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Insta-Clone")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto mt-8 px-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, !currentUser ? /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); handleLogin(e.target.username.value); }, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Enter your username", className: "w-full px-3 py-2 border border-gray-300 rounded-md mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Log In"))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Welcome, ", currentUser, "!"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogout, className: "bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Logout")), /*#__PURE__*/ React.createElement("form", { onSubmit: handlePostSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "post", value: newPost, onChange: (e)=>setNewPost(e.target.value), placeholder: "What's on your mind?", className: "w-full px-3 py-2 border border-gray-300 rounded-md mb-2", rows: "3", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Good morning Post")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, posts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, post.user), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLike(index), className: "text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart mr-1", __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }), " ", post.likes, " Likes"))))))); }