function ScrapeLine({ url, setUrl, placeholder }) { return /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", value: url, onChange: (e)=>setUrl(e.target.value), className: "border p-2 w-full", name: "scrapeUrl", placeholder: placeholder, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function ScrapeLineStory() { const [url, setUrl] = React.useState(''); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ScrapeLine, { url: url, setUrl: setUrl, placeholder: "Enter website URL to scrape", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } 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 TagMaker({ initialTags }) { const [newTag, setNewTag] = React.useState(''); const [tags, setTags] = React.useState(initialTags); const handleNewTag = ()=>{ if (newTag.trim() !== '') { setTags([ ...tags, newTag.trim() ]); setNewTag(''); } }; return /*#__PURE__*/ React.createElement("aside", { className: "pr-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "タグ"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, tags.map((tag, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: `tag-${index}`, className: "mr-2", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `tag-${index}`, __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, tag)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newTag, onChange: (e)=>setNewTag(e.target.value), className: "border p-2 w-full", name: "newTag", placeholder: "新しいタグを追加", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleNewTag, className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "タグを追加"))); } function TagMakerStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TagMaker, { initialTags: [ "エンタメ", "ドラマ", "スポーツ", "ゲーム", "情報技術", "イラスト", "漫画", "グルメ" ], __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [articles, setArticles] = React.useState([]); const [url, setUrl] = React.useState(""); const [title, setTitle] = React.useState(""); const [comment, setComment] = React.useState(""); const [nickname, setNickname] = React.useState(""); const [tags, setTags] = React.useState([ "エンタメ", "ドラマ", "スポーツ", "ゲーム", "情報技術", "イラスト", "漫画", "グルメ", "音楽", "デバイス" ]); const [selectedTags, setSelectedTags] = React.useState([]); const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(null); React.useEffect(()=>{ fetchArticles(); }, []); const fetchArticles = async ()=>{ try { const response = await fetch("/api/db/db1-16", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `articles` ORDER BY `id` DESC" }) }); const data = await response.json(); setArticles(data); } catch (error) { console.error("Error fetching articles:", error); } }; const handleShare = async ()=>{ if (url && title && nickname) { try { await fetch("/api/db/db1-16", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `articles` (`url`, `title`, `comment`, `nickname`, `tags`) VALUES (?, ?, ?, ?, ?)", values: [ url, title, comment, nickname, JSON.stringify(selectedTags) ] }) }); setUrl(""); setTitle(""); setComment(""); setNickname(""); setSelectedTags([]); fetchArticles(); } catch (error) { console.error("Error sharing article:", error); } } }; const handleDelete = async (id)=>{ setShowDeleteConfirm(id); }; const confirmDelete = async (id)=>{ try { await fetch("/api/db/db1-16", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `articles` WHERE `id` = ?", values: [ id ] }) }); fetchArticles(); } catch (error) { console.error("Error deleting article:", error); } setShowDeleteConfirm(null); }; const handleTagChange = (tag)=>{ setSelectedTags((prevTags)=>prevTags.includes(tag) ? prevTags.filter((t)=>t !== tag) : [ ...prevTags, tag ]); }; 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: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArticleHeadTab, { onTop: ()=>console.log("Navigating to TOP"), onMypage: ()=>console.log("Navigating to mypage"), onSearch: ()=>console.log("Showing search interface"), __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto flex-grow p-4 flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-1/3 pr-0 md:pr-4 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "記事の追加"), /*#__PURE__*/ React.createElement(ScrapeLine, { url: url, setUrl: setUrl, placeholder: "共有したい記事のURLを入力", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: title, onChange: (e)=>setTitle(e.target.value), className: "border p-2 w-full", name: "title", placeholder: "記事の簡単なタイトルを入力", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "タグ"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, tags.map((tag, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: `tag-${index}`, checked: selectedTags.includes(tag), onChange: ()=>handleTagChange(tag), className: "mr-2", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `tag-${index}`, __source: { fileName: "", lineNumber: 128, columnNumber: 19 }, __self: this }, tag))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: comment, onChange: (e)=>setComment(e.target.value), className: "border p-2 w-full h-24 resize-none", name: "comment", placeholder: "コメントを入力", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: nickname, onChange: (e)=>setNickname(e.target.value), className: "border p-2 w-full", name: "nickname", placeholder: "ニックネームを入力", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleShare, className: "mt-4 bg-blue-500 text-white px-4 py-2 rounded w-full", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, "記事を共有")), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-2/3", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, "全体タイムライン"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, articles.map((article, index)=>/*#__PURE__*/ React.createElement("article", { key: index, className: "bg-white p-6 rounded-lg shadow-md relative", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: article.url, className: "text-blue-500 hover:underline", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this }, article.title)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, article.url), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, article.comment), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-2", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, "共有者: ", article.nickname), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, JSON.parse(article.tags).map((tag, tagIndex)=>/*#__PURE__*/ React.createElement("span", { key: tagIndex, 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: 184, columnNumber: 21 }, __self: this }, tag))), showDeleteConfirm === article.id ? /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 bg-white p-2 rounded shadow-md", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-2", __source: { fileName: "", lineNumber: 194, columnNumber: 21 }, __self: this }, "本当に削除しますか？"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>confirmDelete(article.id), className: "text-green-500 hover:text-green-700 mr-2", __source: { fileName: "", lineNumber: 195, columnNumber: 21 }, __self: this }, "yes"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDeleteConfirm(null), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 201, columnNumber: 21 }, __self: this }, "no")) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(article.id), className: "absolute top-2 right-2 text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 213, columnNumber: 21 }, __self: this }))))))), /*#__PURE__*/ React.createElement("button", { onClick: scrollToTop, className: "fixed bottom-8 right-8 bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hover:bg-blue-600 transition-colors duration-300", __source: { fileName: "", lineNumber: 221, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-up", __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this }))); }