function MainComponent() { const [posts, setPosts] = React.useState([ { id: 1, user: 'User1', content: 'Content1' }, { id: 2, user: 'User2', content: 'Content2' } ]); const [newPost, setNewPost] = React.useState(''); const [profile, setProfile] = React.useState({ name: '', photo: '', bio: '', contact: '' }); const [activeTab, setActiveTab] = React.useState('home'); const handlePostChange = (event)=>{ setNewPost(event.target.value); }; const handlePostSubmit = (event)=>{ event.preventDefault(); const newPostData = { id: posts.length + 1, user: 'User' + (posts.length + 1), content: newPost }; setPosts([ newPostData, ...posts ]); setNewPost(''); }; const handleProfileChange = (event)=>{ const { name, value } = event.target; setProfile({ ...profile, [name]: value }); }; const renderTabContent = ()=>{ if (activeTab === 'home') { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Create Post"), /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: handlePostSubmit, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "post", className: "w-full h-[100px] p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#FFD700]", placeholder: "What's on your mind?", value: newPost, onChange: handlePostChange, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-2 bg-[#FFD700] text-white p-2 rounded shadow w-full", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Post")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "mb-6 p-4 bg-gray-50 rounded shadow", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, post.user), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, post.content))))); } else if (activeTab === 'search') { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Search"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px]", id: "map", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })); } else if (activeTab === 'chat') { return /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 14 }, __self: this }, "Chat Tab"); } else if (activeTab === 'profile') { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("form", { className: "mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "name", className: "w-full mb-2 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#FFD700]", placeholder: "Name", value: profile.name, onChange: handleProfileChange, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "photo", className: "w-full mb-2 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#FFD700]", placeholder: "Profile Photo URL", value: profile.photo, onChange: handleProfileChange, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "bio", className: "w-full mb-2 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#FFD700]", placeholder: "Bio", value: profile.bio, onChange: handleProfileChange, __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "contact", className: "w-full mb-2 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#FFD700]", placeholder: "Contact Information", value: profile.contact, onChange: handleProfileChange, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }))); } }; const handleTabChange = (tab)=>{ setActiveTab(tab); }; React.useEffect(()=>{ if (activeTab === 'search') { const script = document.createElement('script'); script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places`; script.async = true; document.body.appendChild(script); window.initMap = ()=>{ const map = new google.maps.Map(document.getElementById('map'), { center: { lat: 37.7749, lng: -122.4194 }, zoom: 13 }); const input = document.createElement('input'); input.id = 'pac-input'; input.className = 'controls'; input.type = 'text'; input.placeholder = 'Search Box'; map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); const searchBox = new google.maps.places.SearchBox(input); map.addListener('bounds_changed', ()=>{ searchBox.setBounds(map.getBounds()); }); let markers = []; searchBox.addListener('places_changed', ()=>{ const places = searchBox.getPlaces(); if (places.length === 0) { return; } markers.forEach((marker)=>{ marker.setMap(null); }); markers = []; const bounds = new google.maps.LatLngBounds(); places.forEach((place)=>{ if (!place.geometry || !place.geometry.location) { return; } const icon = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; markers.push(new google.maps.Marker({ map, icon, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); }; return ()=>{ document.body.removeChild(script); delete window.initMap; }; } }, [ activeTab ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 179, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#FFD700] p-4 shadow-md text-center font-roboto", __source: { fileName: "", lineNumber: 180, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, "SNS App")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 183, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto bg-white p-6 shadow rounded-lg", __source: { fileName: "", lineNumber: 184, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-evenly mb-4", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `p-2 ${activeTab === 'home' ? 'bg-[#FFD700] text-white' : ''} rounded`, onClick: ()=>handleTabChange('home'), __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `p-2 ${activeTab === 'search' ? 'bg-[#FFD700] text-white' : ''} rounded`, onClick: ()=>handleTabChange('search'), __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `p-2 ${activeTab === 'chat' ? 'bg-[#FFD700] text-white' : ''} rounded`, onClick: ()=>handleTabChange('chat'), __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `p-2 ${activeTab === 'profile' ? 'bg-[#FFD700] text-white' : ''} rounded`, onClick: ()=>handleTabChange('profile'), __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }))), renderTabContent()))); }