function MainComponent() { const [posts, setPosts] = React.useState([]); const [isGenerating, setIsGenerating] = React.useState(true); const [newPost, setNewPost] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [userName, setUserName] = React.useState("Your Name"); const [userHeadline, setUserHeadline] = React.useState("Your Headline"); const generatePost = React.useCallback(()=>{ setIsLoading(true); fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: "Generate a typical LinkedIn post. Brag about something absurd in an exaggerated, comedic way. Don't use placeholders." } ] }) }).then((response)=>response.json()).then((data)=>{ if (data.status && data.choices && data.choices.length > 0) { fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: "Generate a unique full name and funny exaggerated job position for a LinkedIn user. Format: Name: [Full Name], Position: [Job Position]" } ] }) }).then((response)=>response.json()).then((nameData)=>{ if (nameData.status && nameData.choices && nameData.choices.length > 0) { const namePosition = nameData.choices[0].message.content.split(", "); const name = namePosition[0].split(": ")[1]; const position = namePosition[1].split(": ")[1]; const imagePrompt = posts.length % 3 === 2 ? "selfie of a proud business person" : "professional business headshot of a person, generic, LinkedIn style"; fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(imagePrompt)}`).then((response)=>response.json()).then((imageData)=>{ if (imageData.data && imageData.data.length > 0) { const newPost = { id: Date.now(), author: name, position: position, content: data.choices[0].message.content, likes: 0, comments: 0, imageUrl: imageData.data[0], isImagePost: posts.length % 3 === 2 }; setPosts((prevPosts)=>[ newPost, ...prevPosts ]); setIsLoading(false); } }).catch((error)=>{ console.error("Error generating image:", error); setIsLoading(false); }); } }).catch((error)=>{ console.error("Error generating name and position:", error); setIsLoading(false); }); } }).catch((error)=>{ console.error("Error generating post:", error); setIsLoading(false); }); }, [ posts.length ]); React.useEffect(()=>{ let interval; if (isGenerating) { generatePost(); interval = setInterval(generatePost, 10000); } return ()=>clearInterval(interval); }, [ isGenerating, generatePost ]); const handlePostSubmit = (e)=>{ e.preventDefault(); if (newPost.trim()) { setPosts([ { id: Date.now(), author: userName, position: userHeadline, content: newPost, likes: 0, comments: 0, imageUrl: "https://i.redd.it/ziwmpjzuqz2a1.png" }, ...posts ]); setNewPost(""); } }; const handleLike = (id)=>{ setPosts(posts.map((post)=>post.id === id ? { ...post, likes: post.likes + 1 } : post)); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen font-roboto", __source: { fileName: "", lineNumber: 132, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md sticky top-0 z-10", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-2 flex items-center justify-between", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-blue-600 text-2xl font-bold", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, "LockedIn"), /*#__PURE__*/ React.createElement("div", { className: "relative w-1/3", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search", className: "w-full px-4 py-2 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-3 top-3 text-gray-500", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:block", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-black", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }), " Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-black", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-friends", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }), " My Network")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-black", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase", __source: { fileName: "", lineNumber: 158, columnNumber: 19 }, __self: this }), " Jobs")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-black", __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment-dots", __source: { fileName: "", lineNumber: 163, columnNumber: 19 }, __self: this }), " Messaging")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-black", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell", __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this }), " Notifications")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8 flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-1/4 mb-4 md:mb-0 md:mr-4", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/bac37618-d13b-42ca-b469-309dfaa8964e/", alt: "Your profile picture", className: "w-20 h-20 rounded-full mx-auto mb-4", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: userName, onChange: (e)=>setUserName(e.target.value), className: "text-center font-semibold mb-2 w-full border-b border-gray-300 focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: userHeadline, onChange: (e)=>setUserHeadline(e.target.value), className: "text-center text-gray-600 text-sm mb-4 w-full border-b border-gray-300 focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 pt-4", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-2", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, "Who viewed your profile", " ", /*#__PURE__*/ React.createElement("span", { className: "float-right font-semibold", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, "47")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, "Views of your post", " ", /*#__PURE__*/ React.createElement("span", { className: "float-right font-semibold", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, "138"))))), /*#__PURE__*/ React.createElement("section", { className: "w-full", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 mb-4", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handlePostSubmit, __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "newPost", className: "w-full p-2 border border-gray-300 rounded-lg resize-none", rows: "3", placeholder: "Start a post", value: newPost, onChange: (e)=>setNewPost(e.target.value), __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-gray-600 mr-2", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-image", __source: { fileName: "", lineNumber: 223, columnNumber: 21 }, __self: this }), " Photo"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-gray-600 mr-2", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }), " Video"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-gray-600", __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-alt", __source: { fileName: "", lineNumber: 229, columnNumber: 21 }, __self: this }), " Event")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 text-white px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, "Post")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 mb-4", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsGenerating(!isGenerating), className: `w-full py-2 rounded-full ${isGenerating ? "bg-red-500 hover:bg-red-600" : "bg-green-500 hover:bg-green-600"} text-white font-semibold transition duration-300`, __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, isGenerating ? "Stop it please" : "Okay go on")), isLoading && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 mb-4 text-center", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-blue-600 text-2xl", __source: { fileName: "", lineNumber: 257, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, "LinkedIn posers are writing...")), posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white rounded-lg shadow-md p-4 mb-4", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.imageUrl, alt: `${post.author}'s profile picture`, className: "w-12 h-12 rounded-full mr-4 object-cover", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 275, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, post.author), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 277, columnNumber: 19 }, __self: this }, post.position))), post.isImagePost && /*#__PURE__*/ React.createElement("img", { src: post.imageUrl, alt: "Business person selfie", className: "w-full h-auto rounded-lg mb-4", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 287, columnNumber: 15 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-gray-600", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLike(post.id), className: "flex items-center hover:bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-thumbs-up mr-1", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }), " ", post.likes), /*#__PURE__*/ React.createElement("button", { className: "flex items-center hover:bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment mr-1", __source: { fileName: "", lineNumber: 296, columnNumber: 19 }, __self: this }), " ", post.comments, " ", "comments"))))))); }