function MainComponent() { const [page, setPage] = React.useState('home'); const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [selectedHashtag, setSelectedHashtag] = React.useState(''); const [postDateTime, setPostDateTime] = React.useState(''); const [timezone, setTimezone] = React.useState(''); const [isLiked, setIsLiked] = React.useState(false); React.useEffect(()=>{ const fetchTimezone = async ()=>{ try { const response = await fetch('https://ipapi.co/json/'); if (!response.ok) throw new Error('Failed to fetch timezone'); const data = await response.json(); setTimezone(data.timezone); } catch (error) { console.error(error); } }; fetchTimezone(); }, []); const handleSubmit = (event)=>{ event.preventDefault(); const dateTimeNow = new Date().toLocaleString('ja-JP', { timeZone: timezone }); setPostDateTime(dateTimeNow); setPage('home'); }; const handleHashtagChange = (event)=>{ setSelectedHashtag(event.target.value); }; const renderContent = ()=>{ switch(page){ case 'liked': return /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded bg-white", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "I liked this memo! ❤️"))); case 'hashtag': return /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded bg-white", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "This memo has a #", selectedHashtag))); default: return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "memo", className: "w-full p-2 border rounded bg-white font-roboto", maxLength: "140", placeholder: "What's happening?", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "hashtag", className: "w-full p-2 border rounded bg-white font-roboto mt-2", onChange: handleHashtagChange, value: selectedHashtag, __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "Select a hashtag"), /*#__PURE__*/ React.createElement("option", { value: "nature", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "#nature"), /*#__PURE__*/ React.createElement("option", { value: "travel", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "#travel"), /*#__PURE__*/ React.createElement("option", { value: "photography", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "#photography")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "attach-image", className: "inline-block bg-[#54bd38] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-image text-xl", "aria-hidden": "true", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("input", { id: "attach-image", type: "file", name: "image", accept: "image/*", className: "hidden", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "attach-audio", className: "inline-block bg-[#54bd38] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-microphone text-xl", "aria-hidden": "true", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("input", { id: "attach-audio", type: "file", name: "audio", accept: "audio/*", className: "hidden", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#54bd38] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "Post"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded bg-white", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Just posted my first memo! #", selectedHashtag, " 🚀"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-right text-gray-500", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, "Posted at: ", postDateTime), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-reply", "aria-hidden": "true", __source: { fileName: "", lineNumber: 82, columnNumber: 25 }, __self: this }), " Reply"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash", "aria-hidden": "true", __source: { fileName: "", lineNumber: 83, columnNumber: 25 }, __self: this }), " Delete"), /*#__PURE__*/ React.createElement("span", { onClick: ()=>setIsLiked(!isLiked), style: { color: isLiked ? '#FFC1CC' : 'inherit' }, __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", "aria-hidden": "true", __source: { fileName: "", lineNumber: 84, columnNumber: 113 }, __self: this }), " Like"))))); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:flex lg:min-h-screen border-[#54bd38]", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "bg-[#54bd38] text-white w-full lg:w-1/5 p-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:hidden", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl cursor-pointer", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "📝 MemoApp"), /*#__PURE__*/ React.createElement("nav", { className: `${isMenuOpen ? 'left-0 opacity-100' : '-left-full opacity-0'} fixed top-0 h-full z-20 bg-[#54bd38] p-4 w-1/2 lg:w-1/5 transition-all duration-500 ease-in-out`, __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage('home'), className: "hover:underline text-white", __source: { fileName: "", lineNumber: 101, columnNumber: 21 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage('liked'), className: "hover:underline text-white", __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }, "Liked Memos")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage('hashtag'), className: "hover:underline text-white", __source: { fileName: "", lineNumber: 103, columnNumber: 21 }, __self: this }, "Hashtag Memos")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "hover:underline text-white", __source: { fileName: "", lineNumber: 104, columnNumber: 21 }, __self: this }, "Profile")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "hover:underline text-white", __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }, "Settings"))))), /*#__PURE__*/ React.createElement("div", { className: "hidden lg:block", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage('home'), className: "hover:underline text-white", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage('liked'), className: "hover:underline text-white", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Liked")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage('hashtag'), className: "hover:underline text-white", __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }, "Hashtag")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "hover:underline text-white", __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, "Settings"))))), /*#__PURE__*/ React.createElement("main", { className: "p-4 lg:w-3/5 bg-white", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, renderContent()), /*#__PURE__*/ React.createElement("aside", { className: "hidden lg:block lg:w-1/5 p-4 bg-white", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "#nature")), /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "#travel")), /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, "#photography"))))), /*#__PURE__*/ React.createElement("footer", { className: "text-center p-4 bg-[#54bd38]", __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "MemoApp © 2023")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, ` nav.left-0 { animation: slideIn 0.5s forwards; } nav.-left-full { animation: slideOut 0.5s forwards; } @keyframes slideIn { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0%); } } @keyframes slideOut { from { opacity: 1; transform: translateX(0%); } to { opacity: 0; transform: translateX(-100%); } } `)); }