{/* ページの残りの内容 */}

); }`))), /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 border-l-4 border-yellow-400 p-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-yellow-800", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "使用上の注意"), /*#__PURE__*/ React.createElement("p", { className: "text-yellow-700 mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "このコンポーネントは各ページのルートコンポーネント内で使用することを推奨します。 adClientIdプロパティにはGoogle AdSenseから提供される広告クライアントIDを指定してください。"), /*#__PURE__*/ React.createElement("p", { className: "text-yellow-700", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "重要:"), " Google AdSenseの審査中に「サイトの所有権を確認できませんでした」というエラーが表示された場合は、Google AdSenseの管理画面で提供される確認コードを adClientIdプロパティに設定してください。")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-md font-medium mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "プロパティ"), /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "型"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "デフォルト値"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "説明"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "adClientId"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "string"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, '"ca-pub-9045433447504971"'), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 text-sm text-gray-500", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "Google AdSenseの広告クライアントID"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-md font-medium mb-2", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "実装例"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, "このコンポーネントは視覚的な要素を表示しないため、以下は実装の説明です。"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-3 rounded", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "✓ Google AdSenseスクリプトが追加されました（非表示）"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "✓ Google AdSense所有権確認メタタグが追加されました（非表示）")))); } function Header({ user, loading }) { const [isLoggedIn, setIsLoggedIn] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); useEffect(()=>{ if (!loading && user) { setIsLoggedIn(true); } else { setIsLoggedIn(false); } }, [ user, loading ]); const toggleMenu = ()=>{ setIsMenuOpen(!isMenuOpen); }; useEffect(()=>{ if (!isMenuOpen) return; const handleClickOutside = (event)=>{ if (isMenuOpen && !event.target.closest(".mobile-menu-container")) { setIsMenuOpen(false); } }; document.addEventListener("click", handleClickOutside); return ()=>{ document.removeEventListener("click", handleClickOutside); }; }, [ isMenuOpen ]); return /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm relative", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-2xl font-bold text-indigo-600", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Sense Fork"), /*#__PURE__*/ React.createElement("p", { className: "ml-4 text-sm text-gray-500 hidden sm:block", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "人生の分岐点を共有するプラットフォーム")), /*#__PURE__*/ React.createElement("div", { className: "mobile-menu-container", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-gray-600 focus:outline-none p-2", onClick: (e)=>{ e.stopPropagation(); toggleMenu(); }, "aria-label": "メニュー", "aria-expanded": isMenuOpen, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, isMenuOpen ? /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:block", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "/search", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "検索"), isLoggedIn && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/my-forks", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "投稿履歴"), /*#__PURE__*/ React.createElement("a", { href: "/bookmarks", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, "ブックマーク")), loading ? /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 text-base", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "読み込み中...") : isLoggedIn ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/user-settings", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, "ログアウト")) : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "ログイン")))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-white border-t border-gray-200 absolute w-full z-10 shadow-lg", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 space-y-3", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "/search", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "検索"), isLoggedIn && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/my-forks", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, "投稿履歴"), /*#__PURE__*/ React.createElement("a", { href: "/bookmarks", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, "ブックマーク")), loading ? /*#__PURE__*/ React.createElement("span", { className: "block text-gray-400 py-2 text-base", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, "読み込み中...") : isLoggedIn ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/user-settings", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, "ログアウト")) : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, "ログイン")))); } function HeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4", __source: { fileName: "", lineNumber: 212, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 213, columnNumber: 7 }, __self: this }, "ログインしていない状態"), /*#__PURE__*/ React.createElement(Header, { user: null, loading: false, __source: { fileName: "", lineNumber: 214, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mt-8 mb-4", __source: { fileName: "", lineNumber: 216, columnNumber: 7 }, __self: this }, "ログイン中の状態"), /*#__PURE__*/ React.createElement(Header, { user: { id: "123", name: "テストユーザー" }, loading: false, __source: { fileName: "", lineNumber: 217, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mt-8 mb-4", __source: { fileName: "", lineNumber: 222, columnNumber: 7 }, __self: this }, "読み込み中の状態"), /*#__PURE__*/ React.createElement(Header, { loading: true, __source: { fileName: "", lineNumber: 223, columnNumber: 7 }, __self: this })); } function Header2() { const { data: user, loading } = useUser(); const [isLoggedIn, setIsLoggedIn] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); useEffect(()=>{ if (!loading && user) { setIsLoggedIn(true); } else { setIsLoggedIn(false); } }, [ user, loading ]); const toggleMenu = ()=>{ setIsMenuOpen(!isMenuOpen); }; useEffect(()=>{ if (!isMenuOpen) return; const handleClickOutside = (event)=>{ if (isMenuOpen && !event.target.closest(".mobile-menu-container")) { setIsMenuOpen(false); } }; document.addEventListener("click", handleClickOutside); return ()=>{ document.removeEventListener("click", handleClickOutside); }; }, [ isMenuOpen ]); return /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm relative", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-2xl font-bold text-indigo-600", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Sense Fork"), /*#__PURE__*/ React.createElement("p", { className: "ml-4 text-sm text-gray-500 hidden sm:block", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "人生の分岐点を共有するプラットフォーム")), /*#__PURE__*/ React.createElement("div", { className: "mobile-menu-container", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-gray-600 focus:outline-none p-2", onClick: (e)=>{ e.stopPropagation(); toggleMenu(); }, "aria-label": "メニュー", "aria-expanded": isMenuOpen, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, isMenuOpen ? /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:block", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "/search", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("a", { href: "/create-fork", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "投稿する"), isLoggedIn && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/my-forks", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, "投稿履歴"), /*#__PURE__*/ React.createElement("a", { href: "/bookmarks", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "ブックマーク")), loading ? /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 text-base", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, "読み込み中...") : isLoggedIn ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/user-settings", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, "ログアウト")) : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-gray-600 hover:text-indigo-600 text-base", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "ログイン")))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-white border-t border-gray-200 absolute w-full z-10 shadow-lg", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 space-y-3", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "/search", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("a", { href: "/create-fork", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, "投稿する"), isLoggedIn && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/my-forks", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, "投稿履歴"), /*#__PURE__*/ React.createElement("a", { href: "/bookmarks", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, "ブックマーク")), loading ? /*#__PURE__*/ React.createElement("span", { className: "block text-gray-400 py-2 text-base", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, "読み込み中...") : isLoggedIn ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/user-settings", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, "ログアウト")) : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "block text-gray-600 hover:text-indigo-600 py-2 text-base", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, "ログイン")))); } function Header2Story() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4", __source: { fileName: "", lineNumber: 226, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 227, columnNumber: 7 }, __self: this }, "ヘッダーコンポーネント"), /*#__PURE__*/ React.createElement(Header2, { __source: { fileName: "", lineNumber: 228, columnNumber: 7 }, __self: this })); } function LazyLoadImages1({ src, alt, width, height, className, placeholderColor = "#f3f4f6" }) { const [isLoaded, setIsLoaded] = useState(false); const [isInView, setIsInView] = useState(false); const imgRef = useRef(null); useEffect(()=>{ if (!imgRef.current) return; const observer = new IntersectionObserver((entries)=>{ const [entry] = entries; if (entry.isIntersecting) { setIsInView(true); observer.disconnect(); } }, { rootMargin: "100px", threshold: 0.1 }); observer.observe(imgRef.current); return ()=>{ if (imgRef.current) { observer.disconnect(); } }; }, []); const handleImageLoad = ()=>{ setIsLoaded(true); }; const handleImageError = ()=>{ console.error(`Failed to load image: ${src}`); }; const placeholderSvg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${width || 300} ${height || 200}'%3E%3Crect width='100%25' height='100%25' fill='${placeholderColor.replace('#', '%23')}'/%3E%3C/svg%3E`; return /*#__PURE__*/ React.createElement("div", { ref: imgRef, className: `relative overflow-hidden ${className || ""}`, style: { width: width ? `${width}px` : "100%", height: height ? `${height}px` : "auto" }, __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: placeholderSvg, "data-src": src, alt: alt || "画像", className: `transition-opacity duration-300 ${isLoaded ? "opacity-0 absolute top-0 left-0" : "opacity-100"}`, width: width, height: height, style: { objectFit: "cover", width: "100%", height: "100%" }, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), isInView && /*#__PURE__*/ React.createElement("img", { src: src, alt: alt || "画像", className: `transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`, width: width, height: height, style: { objectFit: "cover", width: "100%", height: "100%" }, onLoad: handleImageLoad, onError: handleImageError, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this })); } function LazyLoadImages1Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8 bg-gray-50", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "LazyLoadImages コンポーネント"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "このコンポーネントは画像の遅延読み込みを行います。ビューポート内に入るまで画像の読み込みを遅延させることで、初期ページ読み込み時間を短縮します。")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "基本的な使用例"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-md font-medium mb-2", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "通常サイズの画像"), /*#__PURE__*/ React.createElement(LazyLoadImages1, { src: "https://source.unsplash.com/random/800x600?nature", alt: "自然の風景", width: 400, height: 300, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-md font-medium mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "カスタムプレースホルダー色"), /*#__PURE__*/ React.createElement(LazyLoadImages1, { src: "https://source.unsplash.com/random/800x600?city", alt: "都市の風景", width: 400, height: 300, placeholderColor: "#e0f2fe", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "異なるサイズの画像"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LazyLoadImages1, { src: "https://source.unsplash.com/random/300x300?portrait", alt: "ポートレート", width: 200, height: 200, __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(LazyLoadImages1, { src: "https://source.unsplash.com/random/600x400?landscape", alt: "風景", width: 300, height: 200, __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(LazyLoadImages1, { src: "https://source.unsplash.com/random/400x600?architecture", alt: "建築物", width: 200, height: 300, __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 border-l-4 border-yellow-400 p-4", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-yellow-800", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "使用上の注意"), /*#__PURE__*/ React.createElement("p", { className: "text-yellow-700", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, "このコンポーネントはIntersectionObserverを使用しているため、古いブラウザでは動作しない場合があります。必要に応じてポリフィルを追加することを検討してください。")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-md font-medium mb-2", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, "使用方法"), /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-100 p-3 rounded text-sm overflow-x-auto", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, ``))); } function LazyImage1({ src, alt, width, height, className = "", placeholderColor = "#f3f4f6", errorFallbackSrc = "/placeholder-error.jpg", threshold = 0.1, objectFit = "cover", loading = "lazy" }) { const [isLoaded, setIsLoaded] = useState(false); const [error, setError] = useState(false); const [isInView, setIsInView] = useState(false); const imgRef = useRef(null); useEffect(()=>{ if (!imgRef.current) return; // IntersectionObserverがサポートされているか確認 if ("IntersectionObserver" in window) { const observer = new IntersectionObserver(([entry])=>{ if (entry.isIntersecting) { setIsInView(true); observer.disconnect(); } }, { threshold, rootMargin: "100px" }); observer.observe(imgRef.current); return ()=>{ if (imgRef.current) { observer.disconnect(); } }; } else { // IntersectionObserverがサポートされていない場合は即座に表示 setIsInView(true); } }, [ threshold ]); const handleLoad = ()=>{ setIsLoaded(true); }; const handleError = ()=>{ setError(true); setIsLoaded(true); console.error(`Failed to load image: ${src}`); }; // プレースホルダーSVGを生成 const placeholderSvg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${width || 300} ${height || 200}'%3E%3Crect width='100%25' height='100%25' fill='${placeholderColor.replace("#", "%23")}'/%3E%3C/svg%3E`; return /*#__PURE__*/ React.createElement("div", { ref: imgRef, className: `relative overflow-hidden ${className}`, style: { width: width || "100%", height: height || "auto", backgroundColor: placeholderColor }, __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, !isLoaded && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", style: { backgroundColor: placeholderColor }, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), isInView && /*#__PURE__*/ React.createElement("img", { src: error ? errorFallbackSrc : src, alt: alt || "画像", onLoad: handleLoad, onError: handleError, loading: loading, className: `w-full h-full transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`, style: { objectFit }, __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this })); } function LazyImage1Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, "LazyImage コンポーネント例"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "基本的な使用例"), /*#__PURE__*/ React.createElement(LazyImage1, { src: "https://images.unsplash.com/photo-1579546929518-9e396f3cc809", alt: "カラフルなグラデーション", width: "300px", height: "200px", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "カスタムプレースホルダー色"), /*#__PURE__*/ React.createElement(LazyImage1, { src: "https://images.unsplash.com/photo-1493612276216-ee3925520721", alt: "夕日", width: "300px", height: "200px", placeholderColor: "#fef3c7", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "エラー時のフォールバック"), /*#__PURE__*/ React.createElement(LazyImage1, { src: "https://invalid-image-url.jpg", alt: "エラーフォールバックをトリガーする無効な画像", width: "300px", height: "200px", errorFallbackSrc: "https://via.placeholder.com/300x200?text=画像が見つかりません", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, "異なるサイズの画像"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LazyImage1, { src: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131", alt: "小さい画像", width: "150px", height: "150px", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(LazyImage1, { src: "https://images.unsplash.com/photo-1579546929518-9e396f3cc809", alt: "中サイズの画像", width: "250px", height: "150px", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(LazyImage1, { src: "https://images.unsplash.com/photo-1493612276216-ee3925520721", alt: "大きい画像", width: "400px", height: "200px", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, "カスタムクラスの使用"), /*#__PURE__*/ React.createElement(LazyImage1, { src: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131", alt: "角丸の画像", width: "300px", height: "200px", className: "rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-8", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-yellow-800", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, "使用上の注意"), /*#__PURE__*/ React.createElement("p", { className: "text-yellow-700", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, "このコンポーネントはIntersectionObserverを使用しているため、古いブラウザでは動作しない場合があります。ただし、フォールバックとして即座に画像を表示するロジックが組み込まれています。")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-sm mt-8", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-md font-medium mb-2", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, "使用方法"), /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-100 p-3 rounded text-sm overflow-x-auto", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, ``))); } function Footer1({ className = "", user = null, loading = false }) { const currentYear = 2025; const isLoggedIn = !!user; return /*#__PURE__*/ React.createElement("footer", { className: `bg-white border-t border-gray-200 ${className}`, __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Sense Fork"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "人生の分岐点を共有するプラットフォーム"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/mizunooto_llc", target: "_blank", rel: "noopener noreferrer", className: "text-gray-500 hover:text-indigo-600", "aria-label": "X (Twitter)", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-xl", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/mizunooto.llc/", target: "_blank", rel: "noopener noreferrer", className: "text-gray-500 hover:text-indigo-600", "aria-label": "Instagram", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-xl", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.facebook.com/mizunooto.llc", target: "_blank", rel: "noopener noreferrer", className: "text-gray-500 hover:text-indigo-600", "aria-label": "Facebook", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook text-xl", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "リンク"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "ホーム")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/search", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "検索")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/create-fork", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "投稿する")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "このアプリについて")), isLoggedIn && /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/user-settings", className: "text-gray-600 hover:text-indigo-600 block py-1 font-medium", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "設定")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 block py-1", __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }, "読み込み中...") : isLoggedIn ? /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "text-gray-600 hover:text-indigo-600 block py-1 font-medium", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, "ログアウト") : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, "ログイン")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "運営情報"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.kiyac.app/termsOfService/t85j9N7y9bqfCcPrEIDw", target: "_blank", rel: "noopener noreferrer", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, "利用規約")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.kiyac.app/privacypolicy/fSYOhM1oTruNjrRdQgjS", target: "_blank", rel: "noopener noreferrer", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "プライバシーポリシー")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://mizunooto.site/", target: "_blank", rel: "noopener noreferrer", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, "運営会社: 合同会社水之音")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/feedback", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, "フィードバック")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/support", className: "text-gray-600 hover:text-indigo-600 block py-1", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, "サポート"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 pt-6 border-t border-gray-200", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, "© ", currentYear, " Sense Fork - 人生の分岐点を共有するプラットフォーム")))); } function Footer1Story() { const [mockLoading, setMockLoading] = useState(false); const [mockUser, setMockUser] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4", __source: { fileName: "", lineNumber: 187, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 188, columnNumber: 7 }, __self: this }, "Default Footer (Not Logged In)"), /*#__PURE__*/ React.createElement(Footer1, { __source: { fileName: "", lineNumber: 189, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-8 mb-4", __source: { fileName: "", lineNumber: 191, columnNumber: 7 }, __self: this }, "Footer with Custom Class"), /*#__PURE__*/ React.createElement(Footer1, { className: "bg-gray-100", __source: { fileName: "", lineNumber: 192, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-8 mb-4", __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, "Footer with Logged In User"), /*#__PURE__*/ React.createElement(Footer1, { user: { id: "123", name: "Test User" }, __source: { fileName: "", lineNumber: 197, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-8 mb-4", __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }, "Footer in Loading State"), /*#__PURE__*/ React.createElement(Footer1, { loading: true, __source: { fileName: "", lineNumber: 200, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-8 mb-4", __source: { fileName: "", lineNumber: 202, columnNumber: 7 }, __self: this }, "Footer in Mobile View"), /*#__PURE__*/ React.createElement("div", { className: "max-w-sm mx-auto border border-gray-300", __source: { fileName: "", lineNumber: 203, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Footer1, { __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 207, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 208, columnNumber: 9 }, __self: this }, "Interactive Demo"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMockLoading(!mockLoading), className: "px-4 py-2 bg-gray-200 rounded hover:bg-gray-300", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, "Toggle Loading: ", mockLoading ? "On" : "Off"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMockUser(mockUser ? null : { id: "123", name: "Test User" }), className: "px-4 py-2 bg-gray-200 rounded hover:bg-gray-300", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, "Toggle User: ", mockUser ? "Logged In" : "Logged Out")), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300", __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Footer1, { user: mockUser, loading: mockLoading, __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this })))); } function MainComponent() { const { data: user, loading: authLoading } = useUser(); const [isLoggedIn, setIsLoggedIn] = useState(false); const [forks, setForks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [page, setPage] = useState(1); const [totalPages, setTotalPages] = useState(1); const [selectedTag, setSelectedTag] = useState(""); const [selectedCategory, setSelectedCategory] = useState(""); const [popularTags, setPopularTags] = useState([]); const [categories, setCategories] = useState([]); const [tagsByCategory, setTagsByCategory] = useState({}); const [sortBy, setSortBy] = useState("latest"); const [showCategoryTags, setShowCategoryTags] = useState(false); const [showFilters, setShowFilters] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [ageFilter, setAgeFilter] = useState({ min: "", max: "" }); const [resultFilter, setResultFilter] = useState(""); const [showTagModal, setShowTagModal] = useState(false); const [allTags, setAllTags] = useState([]); const [tagSearchQuery, setTagSearchQuery] = useState(""); const [tagModalLoading, setTagModalLoading] = useState(false); const [forkTypeFilter, setForkTypeFilter] = useState(""); const [yearFilter, setYearFilter] = useState({ start: "", end: "" }); const [isFilterChanging, setIsFilterChanging] = useState(false); const [initialLoadComplete, setInitialLoadComplete] = useState(false); const [lastFilterParams, setLastFilterParams] = useState(null); const [isFilterApplied, setIsFilterApplied] = useState(false); const [lastAppliedFilter, setLastAppliedFilter] = useState(null); const [isFetching, setIsFetching] = useState(false); const [MAX_TEXT_LENGTH, setMAX_TEXT_LENGTH] = useState(150); const [retryCount, setRetryCount] = useState(0); const maxRetries = 3; const [debugInfo, setDebugInfo] = useState(null); useEffect(()=>{ if (!authLoading) { setIsLoggedIn(!!user); } }, [ user, authLoading ]); const fetchForks = useCallback(async (forceParams = null)=>{ if (isFetching) return; setIsFetching(true); setLoading(true); setError(null); try { const params = forceParams || { page, limit: 10, search: searchQuery, tag: selectedTag, sortBy, categoryId: selectedCategory, age_min: ageFilter.min, age_max: ageFilter.max, result: resultFilter, fork_type: forkTypeFilter, year_start: yearFilter.start, year_end: yearFilter.end }; const paramsString = JSON.stringify(params); if (lastFilterParams === paramsString && !forceParams) { console.log("重複呼び出しを防止:", params); setLoading(false); setIsFetching(false); return; } console.log("検索パラメータ:", params, "最後に適用されたフィルター:", lastAppliedFilter); setLastFilterParams(paramsString); const response = await fetch("/api/forks/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(params) }); if (!response.ok) { const errorText = await response.text(); console.error("API応答エラー:", response.status, errorText); throw new Error(`検索エラー: ${response.status} ${response.statusText} - ${errorText || "不明なエラー"}`); } let data; try { data = await response.json(); } catch (parseError) { console.error("JSONパースエラー:", parseError); throw new Error(`レスポンスのパースに失敗しました: ${parseError.message}`); } console.log("API応答:", data); setDebugInfo(data.debug || null); if (data.success) { const safeForks = (data.forks || []).map((fork)=>({ id: fork.id, title: fork.title || "", options: Array.isArray(fork.options) ? fork.options : [], chosenOption: fork.chosenOption || "", reason: fork.reason || "", result: fork.result || "", reflection: fork.reflection || "", createdAt: fork.createdAt || null, updatedAt: fork.updatedAt || null, likeCount: parseInt(fork.likeCount || 0), age: fork.age ? parseInt(fork.age) : null, year: fork.year ? parseInt(fork.year) : null, forkType: fork.forkType || "personal", userName: fork.userName || "テストユーザー", userId: fork.userId ? parseInt(fork.userId) : 1, userAvatar: fork.userAvatar || null, commentCount: parseInt(fork.commentCount || 0), tags: Array.isArray(fork.tags) ? fork.tags : [ "テスト" ] })); setForks(safeForks); setTotalPages(data.totalPages || 1); setIsFilterApplied(false); setRetryCount(0); } else { throw new Error(data.message || "分岐点の取得に失敗しました"); } } catch (err) { console.error("分岐点取得エラー:", err); setError(err.message); setForks([]); if (retryCount < maxRetries) { console.log(`リトライ ${retryCount + 1}/${maxRetries}...`); setRetryCount((prev)=>prev + 1); setTimeout(()=>{ fetchForks(forceParams); }, 1000 * (retryCount + 1)); } } finally{ setLoading(false); setIsFetching(false); } }, [ page, searchQuery, selectedTag, sortBy, selectedCategory, ageFilter.min, ageFilter.max, resultFilter, forkTypeFilter, yearFilter.start, yearFilter.end, lastFilterParams, isFetching, retryCount ]); const fetchCategoriesAndTags = useCallback(async ()=>{ try { // カテゴリー取得 try { const categoriesResponse = await fetch("/api/categories/list", { method: "POST" }); if (!categoriesResponse.ok) { console.error("カテゴリー取得エラー:", categoriesResponse.status); throw new Error(`カテゴリー取得エラー: ${categoriesResponse.status}`); } const categoriesData = await categoriesResponse.json(); if (categoriesData && categoriesData.success) { setCategories(categoriesData.categories || []); } else { console.error("カテゴリーデータエラー:", categoriesData); } } catch (categoryError) { console.error("カテゴリー取得例外:", categoryError); // エラー時にモックデータを使用 setCategories([ { id: 1, name: "歴史人物", tagCount: 1 }, { id: 2, name: "社会", tagCount: 2 }, { id: 3, name: "挑戦", tagCount: 3 } ]); } // タグ取得 try { const tagsResponse = await fetch("/api/tags/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 20, sortBy: "popular" }) }); if (!tagsResponse.ok) { console.error("タグ取得エラー:", tagsResponse.status); throw new Error(`タグ取得エラー: ${tagsResponse.status}`); } const tagsData = await tagsResponse.json(); if (tagsData && tagsData.success) { setPopularTags(tagsData.tags || []); } else { console.error("タグデータエラー:", tagsData); } } catch (tagError) { console.error("タグ取得例外:", tagError); // エラー時にモックデータを使用 setPopularTags([ { id: 1, name: "キャリア", categoryId: 3, count: 5 }, { id: 2, name: "起業", categoryId: 3, count: 3 }, { id: 3, name: "転職", categoryId: 3, count: 7 }, { id: 4, name: "教育", categoryId: 2, count: 2 }, { id: 5, name: "家族", categoryId: 2, count: 4 }, { id: 6, name: "歴史上の人物", categoryId: 1, count: 1 } ]); } } catch (err) { console.error("カテゴリー・タグ取得エラー:", err); } }, []); useEffect(()=>{ if (!initialLoadComplete) { fetchCategoriesAndTags(); fetchForks(); setInitialLoadComplete(true); } }, [ initialLoadComplete, fetchCategoriesAndTags, fetchForks ]); const applyFilter = (filterType, newValue)=>{ console.log(`フィルター適用: ${filterType}`, newValue); if (filterType === "tag" && selectedTag === newValue || filterType === "category" && selectedCategory === newValue || filterType === "sort" && sortBy === newValue || filterType === "forkType" && forkTypeFilter === newValue || filterType === "result" && resultFilter === newValue) { return; } setPage(1); let params = { page: 1, limit: 10 }; switch(filterType){ case "tag": setSelectedTag(newValue); break; case "category": setSelectedCategory(newValue); break; case "sort": setSortBy(newValue); break; case "forkType": setForkTypeFilter(newValue); break; case "result": setResultFilter(newValue); break; case "page": setPage(newValue); params.page = newValue; break; default: break; } setLastAppliedFilter(filterType); setIsFilterApplied(true); fetchForks(params); }; const handleYearFilterChange = (start, end)=>{ console.log("西暦フィルター変更:", start, end); const startYear = start || ""; const endYear = end || ""; setYearFilter({ start: startYear, end: endYear }); setPage(1); setLastAppliedFilter("year"); setIsFilterApplied(true); const params = { page: 1, limit: 10 }; fetchForks(params); }; const handleAgeFilterChange = (min, max)=>{ console.log("年齢フィルター変更:", min, max); const minAge = min !== "" && !isNaN(parseInt(min, 10)) ? parseInt(min, 10) : ""; const maxAge = max !== "" && !isNaN(parseInt(max, 10)) ? parseInt(max, 10) : ""; setAgeFilter({ min: minAge, max: maxAge }); setPage(1); setLastAppliedFilter("age"); setIsFilterApplied(true); const params = { page: 1, limit: 10 }; fetchForks(params); }; const handleSearch = (e)=>{ e.preventDefault(); setPage(1); setLastAppliedFilter("search"); setIsFilterApplied(true); const params = { page: 1, limit: 10 }; fetchForks(params); }; const handlePageChange = (newPage)=>{ applyFilter("page", newPage); }; const handleTagSelect = (tagName)=>{ applyFilter("tag", tagName); }; const handleSortChange = (newSortBy)=>{ applyFilter("sort", newSortBy); }; const handleForkTypeFilterChange = (type)=>{ applyFilter("forkType", type); }; const handleResultFilterChange = (result)=>{ applyFilter("result", result); }; const handleCategorySelect = (categoryId)=>{ applyFilter("category", categoryId); }; const getResultBadgeColor = (result)=>{ switch(result){ case "◎ 成功だった": return "bg-green-100 text-green-800"; case "△ 微妙/わからない": return "bg-yellow-100 text-yellow-800"; case "× 失敗だった": return "bg-red-100 text-red-800"; default: return "bg-gray-100 text-gray-800"; } }; const renderForkItem = (fork)=>{ const getForkTypeBadge = (forkType)=>{ switch(forkType){ case "organization": return { text: "組織", className: "bg-purple-100 text-purple-800" }; case "personal": default: return { text: "個人", className: "bg-blue-100 text-blue-800" }; } }; const truncateText = (text, maxLength)=>{ if (!text) return ""; if (text.length <= maxLength) return text; return text.substring(0, maxLength) + "..."; }; return /*#__PURE__*/ React.createElement("div", { className: "border border-gray-200 rounded-lg p-4 md:p-6 hover:shadow-md transition-shadow", __source: { fileName: "", lineNumber: 420, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start flex-wrap", __source: { fileName: "", lineNumber: 421, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg md:text-xl font-medium text-gray-900 hover:text-indigo-600 mb-2 md:mb-0", __source: { fileName: "", lineNumber: 422, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: fork.id ? `/view-fork?id=${fork.id}` : "#", __source: { fileName: "", lineNumber: 423, columnNumber: 13 }, __self: this }, fork.title || "タイトルなし")), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 427, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row md:flex-col items-center md:items-end space-x-2 md:space-x-0 justify-end", __source: { fileName: "", lineNumber: 428, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs md:text-sm text-gray-500", __source: { fileName: "", lineNumber: 429, columnNumber: 15 }, __self: this }, fork.createdAt ? new Date(fork.createdAt).toLocaleDateString("ja-JP") : "日付なし"), fork.age && /*#__PURE__*/ React.createElement("p", { className: "text-xs md:text-sm text-indigo-600", __source: { fileName: "", lineNumber: 435, columnNumber: 17 }, __self: this }, fork.age, "歳の��"), fork.year && /*#__PURE__*/ React.createElement("p", { className: "text-xs md:text-sm text-indigo-600", __source: { fileName: "", lineNumber: 440, columnNumber: 17 }, __self: this }, fork.year, "年"), fork.forkType && /*#__PURE__*/ React.createElement("span", { className: `inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getForkTypeBadge(fork.forkType).className} self-start md:self-auto`, __source: { fileName: "", lineNumber: 445, columnNumber: 17 }, __self: this }, getForkTypeBadge(fork.forkType).text)))), fork.userName && /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 458, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 md:w-8 md:h-8 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden", __source: { fileName: "", lineNumber: 459, columnNumber: 13 }, __self: this }, fork.userAvatar ? /*#__PURE__*/ React.createElement("img", { src: fork.userAvatar, alt: `${fork.userName || "ユーザー"}のアバター`, className: "h-full w-full object-cover", onError: (e)=>{ const userName = fork.userName || "User"; e.target.src = `/api/default-avatar?name=${encodeURIComponent(userName)}`; }, __source: { fileName: "", lineNumber: 461, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { src: `/api/default-avatar?name=${encodeURIComponent(fork.userName || "User")}`, alt: `${fork.userName || "ユーザー"}のアバター`, className: "h-full w-full object-cover", __source: { fileName: "", lineNumber: 471, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "ml-2 text-xs md:text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 478, columnNumber: 13 }, __self: this }, fork.userName || "ユーザー")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-50 p-3 md:p-4 rounded-lg", __source: { fileName: "", lineNumber: 484, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xs md:text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 485, columnNumber: 11 }, __self: this }, "選��肢:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-1 text-xs md:text-sm", __source: { fileName: "", lineNumber: 488, columnNumber: 11 }, __self: this }, Array.isArray(fork.options) && fork.options.map((option, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: option === fork.chosenOption ? "font-medium text-indigo-600" : "text-gray-600", __source: { fileName: "", lineNumber: 491, columnNumber: 17 }, __self: this }, option, " ", option === fork.chosenOption && "✓")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-3 md:space-y-4", __source: { fileName: "", lineNumber: 505, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 506, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xs md:text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 507, columnNumber: 13 }, __self: this }, "選択した理由:"), /*#__PURE__*/ React.createElement("p", { className: "text-xs md:text-sm text-gray-600", __source: { fileName: "", lineNumber: 510, columnNumber: 13 }, __self: this }, fork.reason && fork.reason.length > MAX_TEXT_LENGTH ? /*#__PURE__*/ React.createElement(React.Fragment, null, truncateText(fork.reason, MAX_TEXT_LENGTH), /*#__PURE__*/ React.createElement("a", { href: fork.id ? `/view-fork?id=${fork.id}` : "#", className: "ml-1 text-indigo-600 hover:text-indigo-800", __source: { fileName: "", lineNumber: 514, columnNumber: 19 }, __self: this }, "続きを読む")) : fork.reason || "理由は記載されていません")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 527, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xs md:text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 528, columnNumber: 13 }, __self: this }, "結果:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 531, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getResultBadgeColor(fork.result)} self-start`, __source: { fileName: "", lineNumber: 532, columnNumber: 15 }, __self: this }, fork.result || "結果なし"), /*#__PURE__*/ React.createElement("p", { className: "text-xs md:text-sm text-gray-600", __source: { fileName: "", lineNumber: 537, columnNumber: 15 }, __self: this }, fork.reflection && fork.reflection.length > MAX_TEXT_LENGTH ? /*#__PURE__*/ React.createElement(React.Fragment, null, truncateText(fork.reflection, MAX_TEXT_LENGTH), /*#__PURE__*/ React.createElement("a", { href: fork.id ? `/view-fork?id=${fork.id}` : "#", className: "ml-1 text-indigo-600 hover:text-indigo-800", __source: { fileName: "", lineNumber: 541, columnNumber: 21 }, __self: this }, "続きを読む")) : fork.reflection || "振り返りは記載されていません"))), Array.isArray(fork.tags) && fork.tags.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 556, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xs md:text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 557, columnNumber: 15 }, __self: this }, "タグ:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 560, columnNumber: 15 }, __self: this }, fork.tags.map((tag, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleTagSelect(tag), className: "inline-flex items-center px-2 md:px-3 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800 hover:bg-indigo-100 hover:text-indigo-800 transition-colors", __source: { fileName: "", lineNumber: 562, columnNumber: 19 }, __self: this }, "#", tag))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 pt-3 md:pt-4 border-t border-gray-100 flex flex-col md:flex-row md:items-center md:justify-between", __source: { fileName: "", lineNumber: 575, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 md:space-x-6 mb-3 md:mb-0", __source: { fileName: "", lineNumber: 576, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-500 text-xs md:text-sm", __source: { fileName: "", lineNumber: 577, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart mr-1", __source: { fileName: "", lineNumber: 578, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 579, columnNumber: 15 }, __self: this }, fork.likeCount || 0)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-500 text-xs md:text-sm", __source: { fileName: "", lineNumber: 581, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-comment mr-1", __source: { fileName: "", lineNumber: 582, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 583, columnNumber: 15 }, __self: this }, fork.commentCount || 0))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 md:space-x-4", __source: { fileName: "", lineNumber: 586, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: fork.id ? `/view-fork?id=${fork.id}` : "#", className: "text-xs md:text-sm text-indigo-600 hover:text-indigo-800", __source: { fileName: "", lineNumber: 587, columnNumber: 13 }, __self: this }, "詳細を見る →")))); }; const renderDebugInfo = ()=>{ if (!debugInfo) return null; return /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 border border-yellow-200 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 603, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-yellow-800 mb-2", __source: { fileName: "", lineNumber: 604, columnNumber: 9 }, __self: this }, "デバッグ情報:"), /*#__PURE__*/ React.createElement("pre", { className: "text-xs overflow-auto max-h-40 bg-white p-2 rounded", __source: { fileName: "", lineNumber: 607, columnNumber: 9 }, __self: this }, debugInfo ? JSON.stringify(debugInfo, null, 2) : "デバッグ情報なし")); }; const fetchAllTags = useCallback(async (searchQuery = "")=>{ setTagModalLoading(true); try { const response = await fetch("/api/tags/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 100, sortBy: "popular", search: searchQuery }) }); if (!response.ok) { throw new Error(`タグ取得エラー: ${response.status}`); } const data = await response.json(); if (data && data.success) { setAllTags(data.tags || []); } else { console.error("タグデータエラー:", data); // モックデータを使用 setAllTags([ { id: 1, name: "キャリア", categoryId: 3, count: 15 }, { id: 2, name: "転職", categoryId: 3, count: 12 }, { id: 3, name: "起業", categoryId: 3, count: 10 }, { id: 4, name: "教育", categoryId: 2, count: 8 }, { id: 5, name: "家族", categoryId: 2, count: 7 }, { id: 6, name: "歴史上の人物", categoryId: 1, count: 5 }, { id: 7, name: "人間関係", categoryId: 2, count: 9 }, { id: 8, name: "健康", categoryId: 3, count: 6 }, { id: 9, name: "趣味", categoryId: 3, count: 4 }, { id: 10, name: "投資", categoryId: 3, count: 11 } ]); } } catch (error) { console.error("タグ取得エラー:", error); // モックデータを使用 setAllTags([ { id: 1, name: "キャリア", categoryId: 3, count: 15 }, { id: 2, name: "転職", categoryId: 3, count: 12 }, { id: 3, name: "起業", categoryId: 3, count: 10 }, { id: 4, name: "教育", categoryId: 2, count: 8 }, { id: 5, name: "家族", categoryId: 2, count: 7 }, { id: 6, name: "歴史上の人物", categoryId: 1, count: 5 }, { id: 7, name: "人間関係", categoryId: 2, count: 9 }, { id: 8, name: "健康", categoryId: 3, count: 6 }, { id: 9, name: "趣味", categoryId: 3, count: 4 }, { id: 10, name: "投資", categoryId: 3, count: 11 } ]); } finally{ setTagModalLoading(false); } }, []); useEffect(()=>{ if (showTagModal) { fetchAllTags(); } }, [ showTagModal, fetchAllTags ]); const handleTagSearch = (e)=>{ e.preventDefault(); fetchAllTags(tagSearchQuery); }; const renderTagModal = ()=>{ if (!showTagModal) return null; // カテゴリー別にタグをグループ化 const tagsByCategory = {}; allTags.forEach((tag)=>{ const categoryId = tag.categoryId || 0; if (!tagsByCategory[categoryId]) { tagsByCategory[categoryId] = []; } tagsByCategory[categoryId].push(tag); }); return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 695, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden", __source: { fileName: "", lineNumber: 696, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200 flex justify-between items-center", __source: { fileName: "", lineNumber: 697, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800", __source: { fileName: "", lineNumber: 698, columnNumber: 13 }, __self: this }, "タグから選択"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowTagModal(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 701, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 705, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 709, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleTagSearch, className: "flex gap-2", __source: { fileName: "", lineNumber: 710, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: tagSearchQuery, onChange: (e)=>setTagSearchQuery(e.target.value), placeholder: "タグを検索...", className: "flex-grow px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 711, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700", __source: { fileName: "", lineNumber: 718, columnNumber: 15 }, __self: this }, "検索"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto p-4", style: { maxHeight: "calc(80vh - 140px)" }, __source: { fileName: "", lineNumber: 727, columnNumber: 11 }, __self: this }, tagModalLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 732, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-indigo-600 text-xl", __source: { fileName: "", lineNumber: 733, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 734, columnNumber: 17 }, __self: this }, "タグを読み込み中...")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 737, columnNumber: 15 }, __self: this }, tagsByCategory[0] && tagsByCategory[0].length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 740, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 741, columnNumber: 21 }, __self: this }, "その他のタグ:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 744, columnNumber: 21 }, __self: this }, tagsByCategory[0].map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag.id, onClick: ()=>{ handleTagSelect(tag.name); setShowTagModal(false); }, className: "px-3 py-1 rounded-full text-xs bg-gray-100 text-gray-800 hover:bg-indigo-100 hover:text-indigo-800", __source: { fileName: "", lineNumber: 746, columnNumber: 25 }, __self: this }, "#", tag.name, " ", tag.count ? `(${tag.count})` : "")))), categories.map((category)=>tagsByCategory[category.id] && tagsByCategory[category.id].length > 0 && /*#__PURE__*/ React.createElement("div", { key: category.id, __source: { fileName: "", lineNumber: 766, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 767, columnNumber: 25 }, __self: this }, category.name, ":"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 770, columnNumber: 25 }, __self: this }, tagsByCategory[category.id].map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag.id, onClick: ()=>{ handleTagSelect(tag.name); setShowTagModal(false); }, className: "px-3 py-1 rounded-full text-xs bg-gray-100 text-gray-800 hover:bg-indigo-100 hover:text-indigo-800", __source: { fileName: "", lineNumber: 772, columnNumber: 29 }, __self: this }, "#", tag.name, " ", tag.count ? `(${tag.count})` : ""))))), Object.keys(tagsByCategory).length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 790, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tag text-gray-400 text-2xl", __source: { fileName: "", lineNumber: 791, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 792, columnNumber: 21 }, __self: this }, "タグが見つかりませんでした")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200 flex justify-end", __source: { fileName: "", lineNumber: 801, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowTagModal(false), className: "px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50", __source: { fileName: "", lineNumber: 802, columnNumber: 13 }, __self: this }, "閉じる")))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 815, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { user: user, loading: authLoading, __source: { fileName: "", lineNumber: 816, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 818, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-8", __source: { fileName: "", lineNumber: 819, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl md:text-2xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 820, columnNumber: 11 }, __self: this }, "分岐点検索"), /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-base text-gray-600", __source: { fileName: "", lineNumber: 823, columnNumber: 11 }, __self: this }, "人生の分岐点を検索して、他の人の経験から学びましょう"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "mt-4", __source: { fileName: "", lineNumber: 827, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-2", __source: { fileName: "", lineNumber: 828, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 829, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "キーワードで検索...", className: "w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 830, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 838, columnNumber: 15 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowTagModal(true), className: "px-4 py-2 bg-indigo-100 text-indigo-800 rounded-md hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-center", __source: { fileName: "", lineNumber: 844, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tags mr-1", __source: { fileName: "", lineNumber: 849, columnNumber: 17 }, __self: this }), " タグから選択"), isLoggedIn && /*#__PURE__*/ React.createElement("a", { href: "/create-fork", className: "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 text-center", __source: { fileName: "", lineNumber: 852, columnNumber: 17 }, __self: this }, "新規投稿")))), renderDebugInfo(), /*#__PURE__*/ React.createElement("div", { className: "md:hidden mb-4", __source: { fileName: "", lineNumber: 865, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowFilters(!showFilters), className: "w-full flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none", __source: { fileName: "", lineNumber: 866, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-filter mr-2 ${selectedTag || selectedCategory || ageFilter.min || ageFilter.max || resultFilter || forkTypeFilter || yearFilter.start || yearFilter.end ? "text-indigo-600" : ""}`, __source: { fileName: "", lineNumber: 870, columnNumber: 13 }, __self: this }), showFilters ? "フィルターを閉��る" : "フィルターを表示", (selectedTag || selectedCategory || ageFilter.min || ageFilter.max || resultFilter || forkTypeFilter || yearFilter.start || yearFilter.end) && /*#__PURE__*/ React.createElement("span", { className: "ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800", __source: { fileName: "", lineNumber: 893, columnNumber: 15 }, __self: this }, "適用中"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 900, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `md:w-1/4 ${showFilters ? "block" : "hidden md:block"}`, __source: { fileName: "", lineNumber: 901, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 md:p-6 mb-6", __source: { fileName: "", lineNumber: 904, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 905, columnNumber: 15 }, __self: this }, "フィルター"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 909, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 910, columnNumber: 17 }, __self: this }, "並び替え:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 913, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSortChange("latest"), className: `w-full text-left px-3 py-2 rounded-md text-sm ${sortBy === "latest" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 914, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2", __source: { fileName: "", lineNumber: 918, columnNumber: 21 }, __self: this }), "最新順"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSortChange("popular"), className: `w-full text-left px-3 py-2 rounded-md text-sm ${sortBy === "popular" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 920, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire mr-2", __source: { fileName: "", lineNumber: 924, columnNumber: 21 }, __self: this }), "人気順 (いいね×0.7+コメント×0.3)"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSortChange("comments"), className: `w-full text-left px-3 py-2 rounded-md text-sm ${sortBy === "comments" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 927, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments mr-2", __source: { fileName: "", lineNumber: 931, columnNumber: 21 }, __self: this }), "コメント数順"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 936, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 937, columnNumber: 17 }, __self: this }, "タイプ:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 940, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleForkTypeFilterChange(""), className: `w-full text-left px-3 py-2 rounded-md text-sm ${forkTypeFilter === "" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 941, columnNumber: 19 }, __self: this }, "すべて"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleForkTypeFilterChange("personal"), className: `w-full text-left px-3 py-2 rounded-md text-sm ${forkTypeFilter === "personal" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 947, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 951, columnNumber: 21 }, __self: this }), "個人"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleForkTypeFilterChange("organization"), className: `w-full text-left px-3 py-2 rounded-md text-sm ${forkTypeFilter === "organization" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 953, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building mr-2", __source: { fileName: "", lineNumber: 957, columnNumber: 21 }, __self: this }), "組織"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 962, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 963, columnNumber: 17 }, __self: this }, "結果:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 966, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleResultFilterChange(""), className: `w-full text-left px-3 py-2 rounded-md text-sm ${resultFilter === "" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 967, columnNumber: 19 }, __self: this }, "すべて"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleResultFilterChange("◎ 成功だった"), className: `w-full text-left px-3 py-2 rounded-md text-sm ${resultFilter === "◎ 成功だった" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 973, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block w-4 h-4 bg-green-100 rounded-full mr-2", __source: { fileName: "", lineNumber: 977, columnNumber: 21 }, __self: this }), "成功だった"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleResultFilterChange("△ 微妙/わからない"), className: `w-full text-left px-3 py-2 rounded-md text-sm ${resultFilter === "△ 微妙/わからない" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 980, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block w-4 h-4 bg-yellow-100 rounded-full mr-2", __source: { fileName: "", lineNumber: 986, columnNumber: 21 }, __self: this }), "微妙/わからない"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleResultFilterChange("× 失敗だった"), className: `w-full text-left px-3 py-2 rounded-md text-sm ${resultFilter === "× 失敗だった" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 989, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block w-4 h-4 bg-red-100 rounded-full mr-2", __source: { fileName: "", lineNumber: 993, columnNumber: 21 }, __self: this }), "失敗だった"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 999, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 1000, columnNumber: 17 }, __self: this }, "西暦:"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 1003, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 1004, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "yearStart", className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 1005, columnNumber: 21 }, __self: this }, "開始年:"), /*#__PURE__*/ React.createElement("label", { htmlFor: "yearEnd", className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 1011, columnNumber: 21 }, __self: this }, "終了年:")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 1015, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", id: "yearStart", min: "1900", max: "2100", value: yearFilter.start, onChange: (e)=>setYearFilter({ ...yearFilter, start: e.target.value }), placeholder: "1980", className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 1016, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 1028, columnNumber: 21 }, __self: this }, "〜"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "yearEnd", min: "1900", max: "2100", value: yearFilter.end, onChange: (e)=>setYearFilter({ ...yearFilter, end: e.target.value }), placeholder: "2025", className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 1029, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-end", __source: { fileName: "", lineNumber: 1042, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleYearFilterChange(yearFilter.start, yearFilter.end), className: "px-2 py-1 text-xs bg-indigo-600 text-white rounded hover:bg-indigo-700", __source: { fileName: "", lineNumber: 1043, columnNumber: 21 }, __self: this }, "適用"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setYearFilter({ start: "", end: "" }); handleYearFilterChange("", ""); }, className: "ml-2 px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-100", __source: { fileName: "", lineNumber: 1051, columnNumber: 21 }, __self: this }, "クリア")))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 1064, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 1065, columnNumber: 17 }, __self: this }, "年齢:"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 1068, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 1069, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "ageMin", className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 1070, columnNumber: 21 }, __self: this }, "最小年齢:"), /*#__PURE__*/ React.createElement("label", { htmlFor: "ageMax", className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 1073, columnNumber: 21 }, __self: this }, "最大年��:")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 1077, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", id: "ageMin", min: "0", max: "120", value: ageFilter.min, onChange: (e)=>setAgeFilter({ ...ageFilter, min: e.target.value }), placeholder: "10", className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 1078, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 1090, columnNumber: 21 }, __self: this }, "〜"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "ageMax", min: "0", max: "120", value: ageFilter.max, onChange: (e)=>setAgeFilter({ ...ageFilter, max: e.target.value }), placeholder: "30", className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 1091, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-end", __source: { fileName: "", lineNumber: 1104, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAgeFilterChange(ageFilter.min, ageFilter.max), className: "px-2 py-1 text-xs bg-indigo-600 text-white rounded hover:bg-indigo-700", __source: { fileName: "", lineNumber: 1105, columnNumber: 21 }, __self: this }, "適用"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setAgeFilter({ min: "", max: "" }); handleAgeFilterChange("", ""); }, className: "ml-2 px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-100", __source: { fileName: "", lineNumber: 1113, columnNumber: 21 }, __self: this }, "クリア")))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 1126, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 1127, columnNumber: 17 }, __self: this }, "カテゴリー:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 1130, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleCategorySelect(""), className: `w-full text-left px-3 py-2 rounded-md text-sm ${selectedCategory === "" ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 1131, columnNumber: 19 }, __self: this }, "すべて"), categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: ()=>handleCategorySelect(category.id), className: `w-full text-left px-3 py-2 rounded-md text-sm ${selectedCategory === category.id ? "bg-indigo-100 text-indigo-800" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 1138, columnNumber: 21 }, __self: this }, category.name, " ", category.tagCount ? `(${category.tagCount})` : "")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1150, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 1151, columnNumber: 17 }, __self: this }, selectedCategory ? `${categories.find((c)=>c.id === selectedCategory)?.name || ""}のタグ` : "人気のタグ", ":"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 1157, columnNumber: 17 }, __self: this }, selectedCategory && tagsByCategory[selectedCategory] ? tagsByCategory[selectedCategory].length > 0 ? tagsByCategory[selectedCategory].map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag.id, onClick: ()=>handleTagSelect(tag.name), className: `px-3 py-1 rounded-full text-xs ${selectedTag === tag.name ? "bg-indigo-100 text-indigo-800 border border-indigo-300" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 1161, columnNumber: 25 }, __self: this }, "#", tag.name, " ", tag.count ? `(${tag.count})` : "")) : /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1174, columnNumber: 23 }, __self: this }, "このカテゴリにはタグがありません") : popularTags.length > 0 ? popularTags.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag.id, onClick: ()=>handleTagSelect(tag.name), className: `px-3 py-1 rounded-full text-xs ${selectedTag === tag.name ? "bg-indigo-100 text-indigo-800 border border-indigo-300" : "bg-gray-100 text-gray-800 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 1180, columnNumber: 23 }, __self: this }, "#", tag.name, " ", tag.count ? `(${tag.count})` : "")) : /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1193, columnNumber: 21 }, __self: this }, "タグが見つか��ません"))), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowFilters(false), className: "w-full md:hidden inline-flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none mt-4", __source: { fileName: "", lineNumber: 1200, columnNumber: 15 }, __self: this }, "フィルターを閉じる"))), /*#__PURE__*/ React.createElement("div", { className: "md:w-3/4", __source: { fileName: "", lineNumber: 1210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 md:p-6", __source: { fileName: "", lineNumber: 1211, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 1212, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-800", __source: { fileName: "", lineNumber: 1213, columnNumber: 17 }, __self: this }, "検索結果"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-1", __source: { fileName: "", lineNumber: 1216, columnNumber: 17 }, __self: this }, selectedTag && /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800", __source: { fileName: "", lineNumber: 1218, columnNumber: 21 }, __self: this }, "#", selectedTag, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedTag(""); setPage(1); setIsFilterApplied(true); fetchForks({ page: 1, limit: 10, search: searchQuery, tag: "", sortBy, categoryId: selectedCategory, age_min: ageFilter.min, age_max: ageFilter.max, result: resultFilter, fork_type: forkTypeFilter, year_start: yearFilter.start, year_end: yearFilter.end }); }, className: "ml-1 text-indigo-600 hover:text-indigo-800", __source: { fileName: "", lineNumber: 1220, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 1242, columnNumber: 25 }, __self: this }))), (ageFilter.min || ageFilter.max) && /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800", __source: { fileName: "", lineNumber: 1247, columnNumber: 21 }, __self: this }, "年齢: ", ageFilter.min || "0", "〜", ageFilter.max || "120", /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setAgeFilter({ min: "", max: "" }); setPage(1); setIsFilterApplied(true); fetchForks({ page: 1, limit: 10, search: searchQuery, tag: selectedTag, sortBy, categoryId: selectedCategory, age_min: "", age_max: "", result: resultFilter, fork_type: forkTypeFilter, year_start: yearFilter.start, year_end: yearFilter.end }); }, className: "ml-1 text-indigo-600 hover:text-indigo-800", __source: { fileName: "

分岐点検索

フィルター

並び替え:

タイプ:

結果:

西暦:

年齢:

カテゴリー:

人気のタグ:

検索結果