function ArticleHeadTab({ onTop, onMypage, onSearch }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-100 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/article-timeline", target: "_blank", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onTop, className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 5, columnNumber: 53 }, __self: this }, "TOP")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/my-page", target: "_blank", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onMypage, className: "bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 9, columnNumber: 46 }, __self: this }, "mypage")), /*#__PURE__*/ React.createElement("a", { href: "/search-page", target: "_blank", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onSearch, className: "bg-red-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 12, columnNumber: 50 }, __self: this }, "search"))))); } function ArticleHeadTabStory() { const handleTop = ()=>{ console.log('Navigating to TOP'); }; const handleMypage = ()=>{ console.log('Navigating to mypage'); }; const handleSearch = ()=>{ console.log('Showing search interface'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArticleHeadTab, { onTop: handleTop, onMypage: handleMypage, onSearch: handleSearch, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function MainComponent() { const [nickname, setNickname] = React.useState(''); const [articles, setArticles] = React.useState([]); const [showConfirmation, setShowConfirmation] = React.useState(null); const handleSearch = async ()=>{ const response = await fetch('/api/db/db1-16', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `articles` WHERE `nickname` = ?', values: [ nickname ] }) }); const data = await response.json(); setArticles(data); }; const handleDelete = async (id)=>{ if (showConfirmation === id) { await fetch('/api/db/db1-16', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `articles` WHERE `id` = ?', values: [ id ] }) }); setArticles(articles.filter((article)=>article.id !== id)); setShowConfirmation(null); } else { setShowConfirmation(id); } }; const scrollToTop = ()=>{ window.scrollTo({ top: 0, behavior: 'smooth' }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArticleHeadTab, { onTop: ()=>{}, onMypage: ()=>{}, onSearch: ()=>{}, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto mt-8 px-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "nickname", value: nickname, onChange: (e)=>setNickname(e.target.value), placeholder: "ニックネームを入力", className: "w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "検索")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, articles.map((article)=>/*#__PURE__*/ React.createElement("div", { key: article.id, className: "bg-white p-6 rounded shadow relative flex flex-col", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: article.url, target: "_blank", rel: "noopener noreferrer", className: "text-xl font-semibold mb-2 text-blue-500 hover:underline block truncate", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, article.comment), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "ニックネーム: ", article.nickname), /*#__PURE__*/ React.createElement("a", { href: article.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:underline block truncate mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, article.url), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap mt-2", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, article.tags.split(',').map((tag, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, tag.trim()))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 flex flex-col items-end", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(article.id), className: "text-red-500 hover:text-red-600 transition duration-300", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this })), showConfirmation === article.id && /*#__PURE__*/ React.createElement("div", { className: "mt-2 bg-white shadow-md rounded p-2", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }, "本当に削除しますか？"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-2", __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(article.id), className: "text-green-500 hover:text-green-600", __source: { fileName: "", lineNumber: 91, columnNumber: 23 }, __self: this }, "yes"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowConfirmation(null), className: "text-red-500 hover:text-red-600", __source: { fileName: "", lineNumber: 92, columnNumber: 23 }, __self: this }, "no")))))))), /*#__PURE__*/ React.createElement("button", { onClick: scrollToTop, className: "fixed bottom-4 right-4 bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-up", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }))); }