function UpdateButtonDesign({ onClick, label }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-white text-[#800080] px-4 py-2 rounded hover:bg-[#FFB6C1] focus:outline-none focus:ring-2 focus:ring-[#800080] focus:ring-offset-2", onClick: onClick, "aria-label": label || "Update content", tabIndex: "0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label || "Update"); } function UpdateButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UpdateButtonDesign, { onClick: ()=>console.log("Clicked!"), label: "Update", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function YahooJapanHeaderComponent({ appName, navigationLinks, statusIndicators, onUpdate }) { return /*#__PURE__*/ React.createElement(DarkPurpleHeaderDesign, { appName: appName, navigationLinks: navigationLinks, statusIndicators: statusIndicators, onUpdate: onUpdate, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function YahooJapanHeaderComponentStory() { const navigationLinks = [ { href: "#home", label: "Home" }, { href: "#about", label: "About" }, { href: "#services", label: "Services" } ]; const statusIndicators = [ { label: "User Logged In", content: "👤 Admin" }, { label: "Notifications", content: "🔔 4" } ]; const handleUpdate = ()=>alert('Update clicked!'); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(YahooJapanHeaderComponent, { appName: "Yahoo! JAPAN", navigationLinks: navigationLinks, statusIndicators: statusIndicators, onUpdate: handleUpdate, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function DarkPurpleHeaderDesign({ appName, navigationLinks, statusIndicators, onUpdate }) { return /*#__PURE__*/ React.createElement(PurpleHeaderBarApp, { appName: appName, navigationLinks: navigationLinks, statusIndicators: statusIndicators, onUpdate: onUpdate, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function DarkPurpleHeaderDesignStory() { const navigationLinks = [ { href: "#home", label: "Home" }, { href: "#about", label: "About" }, { href: "#services", label: "Services" } ]; const statusIndicators = [ { label: "User Logged In", content: "👤 Admin" }, { label: "Notifications", content: "🔔 4" } ]; const handleUpdate = ()=>alert('Update clicked!'); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DarkPurpleHeaderDesign, { appName: "My Application", navigationLinks: navigationLinks, statusIndicators: statusIndicators, onUpdate: handleUpdate, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function PurpleHeaderBarApp({ appName, navigationLinks, statusIndicators, onUpdate }) { return /*#__PURE__*/ React.createElement("header", { className: "bg-[#6A0DAD] p-4 flex flex-wrap items-center justify-between", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-bold", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, appName), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex gap-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, navigationLinks.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "text-white hover:underline", "aria-label": link.label, __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, link.label))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, statusIndicators.map((status, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "text-white pr-4", "aria-label": status.label, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, status.content))), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-[#6A0DAD] px-4 py-2 rounded hover:bg-[#f3e5f5] focus:outline-none", onClick: onUpdate, "aria-label": "Update", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Update")); } function PurpleHeaderBarAppStory() { const navigationLinks = [ { href: "#home", label: "Home" }, { href: "#about", label: "About" }, { href: "#contact", label: "Contact" } ]; const statusIndicators = [ { label: "User Logged In", content: "👤 Alex" }, { label: "Notifications", content: "🔔 3" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PurpleHeaderBarApp, { appName: "Application Name", navigationLinks: navigationLinks, statusIndicators: statusIndicators, onUpdate: ()=>console.log("Update clicked"), __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); } function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(''); const [content, setContent] = React.useState([]); const [loading, setLoading] = React.useState(false); const navigationLinks = [ { href: "#news", label: "ニュース" }, { href: "#finance", label: "ファイナンス" }, { href: "#sports", label: "スポーツ" } ]; const statusIndicators = [ { label: "天気", content: "☀️ 19°C" }, { label: "メール", content: "✉️ 5" } ]; const handleUpdate = ()=>{ setLoading(true); fetch('/api/db/new', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: "INSERT INTO `notion_updates` (title, description, image_src) VALUES (?, ?, ?)", values: [ "New Notion Content Title", "Description of the new content.", "/path/to/image.jpg" ] }) }).then((response)=>response.json()).then((data)=>{ fetch('/api/db/new', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: "SELECT title, description, image_src FROM `notion_updates` ORDER BY created_at DESC LIMIT 5" }) }).then((response)=>response.json()).then((data)=>{ setContent(data.map((item)=>({ title: item.title, description: item.description, imageSrc: item.image_src }))); setLoading(false); }); }); }; React.useEffect(()=>{ fetch('/integrations/google-search/search?q=' + encodeURIComponent('notion'), { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setSearchQuery(data.items.map((item)=>item.title).join(', ')); }); }, []); const handleSearch = (e)=>{ e.preventDefault(); setSearchQuery(e.target.search.value); }; let contentDisplay; if (loading) { contentDisplay = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 22 }, __self: this }, "Loading..."); } else { contentDisplay = content.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 rounded overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full", src: item.imageSrc, alt: `News Item ${index}`, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2 text-[#333333]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, item.description)))); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(YahooJapanHeaderComponent, { appName: "Yahoo! JAPAN", navigationLinks: navigationLinks, statusIndicators: statusIndicators, onUpdate: handleUpdate, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex justify-center p-4", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex border-2 rounded", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "px-4 py-2 w-80", placeholder: "検索…", name: "search", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 text-white bg-[#FFB6C1] border-l", type: "submit", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "検索"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, contentDisplay), /*#__PURE__*/ React.createElement("aside", { className: "bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#F2F2F2] p-4 text-center text-sm", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#333333]", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "©2023 Yahoo! JAPAN"))); }