function CGeneSearchUi() { const titles = [ { id: 1, title: 'Gene Editing Techniques', username: 'johndoe' }, { id: 2, title: 'CRISPR-Cas9 Applications', username: 'janesmith' }, { id: 3, title: 'Ethical Considerations in Genetics', username: 'davidlee' }, { id: 4, title: 'The Future of Personalized Medicine', username: 'emilychen' }, { id: 5, title: 'Genetic Testing and Counseling', username: 'peterkim' } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#edf2f7] font-sans text-[#2d3748] min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a202c] text-white py-4 px-6 fixed top-0 left-0 right-0", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "GeneSearch"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:bg-[#2d3748] hover:text-[#63b3ed] px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:bg-[#2d3748] hover:text-[#63b3ed] px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, "New")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:bg-[#2d3748] hover:text-[#63b3ed] px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "My List")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:bg-[#2d3748] hover:text-[#63b3ed] px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "My Page")))))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex justify-center mt-20", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, titles.map((title)=>/*#__PURE__*/ React.createElement("li", { key: title.id, className: "bg-white p-4 rounded-md shadow-md hover:bg-[#e2e8f0] border-b border-[#cbd5e0]", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, title.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "by ", title.username)))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a202c] text-white py-2 px-4 text-center fixed bottom-0 left-0 right-0", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "2024 koyoy.com"))); } function CGeneSearchUiStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CGeneSearchUi, { __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this })); } function MainComponent() { const [articles, setArticles] = React.useState([]); const [loading, setLoading] = React.useState(false); const [searchWord, setSearchWord] = React.useState(""); const [modalOpen, setModalOpen] = React.useState(false); const [selectedArticle, setSelectedArticle] = React.useState(null); const fetchArticles = async ()=>{ setLoading(true); const response = await fetch('/api/f-article-list', { method: 'POST', body: JSON.stringify({ search_word: searchWord }) }); const data = await response.json(); setLoading(false); if (!data.error) { setArticles(data.articledata); } }; React.useEffect(()=>{ fetchArticles(); }, [ searchWord ]); React.useEffect(()=>{ if (typeof window !== 'undefined' && window.gtag) { window.gtag('config', 'G-RMPKPQLNQ2', { page_path: window.location.pathname }); } }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#edf2f7] font-sans text-[#2d3748] min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a202c] text-white py-4 px-6 fixed top-0 left-0 right-0", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "GeneSearch"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-bold hover:bg-[#2d3748] hover:text-[#63b3ed] px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/new/", className: "hover:bg-[#2d3748] hover:text-[#63b3ed] px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "New")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/mylist/", className: "hover:bg-[#2d3748] hover:text-[#63b3ed] px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "My List")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/mypage/", className: "hover:bg-[#2d3748] hover:text-[#63b3ed] px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "My Page")))))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col items-center mt-20 pb-[100px]", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchWord, onChange: (e)=>setSearchWord(e.target.value), className: "w-full p-4 mb-4 rounded-md shadow-md border border-[#cbd5e0] focus:outline-none", placeholder: "Search...", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this })) : /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, articles.map((article)=>/*#__PURE__*/ React.createElement("li", { key: article.id, className: "bg-white p-4 rounded-md shadow-md hover:bg-[#e2e8f0] border-b border-[#cbd5e0] cursor-pointer", onClick: ()=>{ setSelectedArticle(article); setModalOpen(true); }, __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, article.title)))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a202c] text-white py-2 px-4 text-center fixed bottom-0 left-0 right-0", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, "2024 koyoy.com")), modalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-[90vw] max-w-3xl h-[85vh] p-4 rounded overflow-auto relative", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-2 right-2 text-black", onClick: ()=>setModalOpen(false), __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("iframe", { src: `/showarticle/?articleid=${selectedArticle.id}`, className: "w-full h-full", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this })))); }