@kids-reporter/routing-ui 0.1.23 → 0.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,7 +2,7 @@ import { MenuItem } from '../types';
|
|
|
2
2
|
export declare const SUBSCRIBE_URL = "https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3";
|
|
3
3
|
export declare const DONATE_URL = "https://support.twreporter.org/";
|
|
4
4
|
export declare const JOIN_US_URL = "https://kids.twreporter.org/article/about-join-us";
|
|
5
|
-
export declare const PRIVACY_POLICY = "https://www.twreporter.org/a/privacy-
|
|
5
|
+
export declare const PRIVACY_POLICY = "https://www.twreporter.org/a/privacy-footer";
|
|
6
6
|
export declare const SEARCH_PLACEHOLDER = "\u641C\u5C0B\u66F4\u591A\u65B0\u805E\u3001\u8B70\u984C";
|
|
7
7
|
export declare const MENU_ITEMS: MenuItem[];
|
|
8
8
|
export declare const MY_READING_URL = "/myreading";
|
|
@@ -9,7 +9,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
9
9
|
const SUBSCRIBE_URL = exports.SUBSCRIBE_URL = 'https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3';
|
|
10
10
|
const DONATE_URL = exports.DONATE_URL = 'https://support.twreporter.org/';
|
|
11
11
|
const JOIN_US_URL = exports.JOIN_US_URL = 'https://kids.twreporter.org/article/about-join-us';
|
|
12
|
-
const PRIVACY_POLICY = exports.PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-
|
|
12
|
+
const PRIVACY_POLICY = exports.PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-footer';
|
|
13
13
|
const SEARCH_PLACEHOLDER = exports.SEARCH_PLACEHOLDER = '搜尋更多新聞、議題';
|
|
14
14
|
const MENU_ITEMS = exports.MENU_ITEMS = [{
|
|
15
15
|
label: '最新',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-values.js","names":["_icons","require","_jsxRuntime","SUBSCRIBE_URL","exports","DONATE_URL","JOIN_US_URL","PRIVACY_POLICY","SEARCH_PLACEHOLDER","MENU_ITEMS","label","href","subItems","MY_READING_URL","READING_SETTINGS_URL","ADDITIONAL_MENU_ITEMS","showIcon","icon","jsx","MyReadingIconSmall","hideInFooter","SettingsIconSmall","external","SOCIAL_MEDIA_ITEMS"],"sources":["../../src/constants/default-values.tsx"],"sourcesContent":["import { MyReadingIconSmall, SettingsIconSmall } from '../icons'\nimport { MenuItem } from '../types'\n\nexport const SUBSCRIBE_URL =\n 'https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3'\nexport const DONATE_URL = 'https://support.twreporter.org/'\nexport const JOIN_US_URL = 'https://kids.twreporter.org/article/about-join-us'\nexport const PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-
|
|
1
|
+
{"version":3,"file":"default-values.js","names":["_icons","require","_jsxRuntime","SUBSCRIBE_URL","exports","DONATE_URL","JOIN_US_URL","PRIVACY_POLICY","SEARCH_PLACEHOLDER","MENU_ITEMS","label","href","subItems","MY_READING_URL","READING_SETTINGS_URL","ADDITIONAL_MENU_ITEMS","showIcon","icon","jsx","MyReadingIconSmall","hideInFooter","SettingsIconSmall","external","SOCIAL_MEDIA_ITEMS"],"sources":["../../src/constants/default-values.tsx"],"sourcesContent":["import { MyReadingIconSmall, SettingsIconSmall } from '../icons'\nimport { MenuItem } from '../types'\n\nexport const SUBSCRIBE_URL =\n 'https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3'\nexport const DONATE_URL = 'https://support.twreporter.org/'\nexport const JOIN_US_URL = 'https://kids.twreporter.org/article/about-join-us'\nexport const PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-footer'\nexport const SEARCH_PLACEHOLDER = '搜尋更多新聞、議題'\n\nexport const MENU_ITEMS: MenuItem[] = [\n {\n label: '最新',\n href: '/all',\n subItems: [],\n },\n {\n label: '專題',\n href: '/topic/page/1',\n subItems: [],\n },\n {\n label: '新聞',\n href: '/category/news',\n subItems: [\n { label: '焦點新聞', href: '/category/news/times' },\n { label: '真的假的', href: '/category/news/knowledge' },\n { label: '人物故事', href: '/category/news/story' },\n { label: '文化報導', href: '/category/news/explore' },\n { label: '專欄', href: '/category/news/column' },\n { label: '英文新聞', href: '/category/news/english-version' },\n ],\n },\n {\n label: '多媒體',\n href: '/category/storytelling',\n subItems: [\n { label: '圖解新聞', href: '/category/storytelling/graphic-news' },\n { label: '新聞遊戲', href: '/category/storytelling/news-game' },\n { label: '圖文故事', href: '/category/storytelling/graphic-story' },\n ],\n },\n {\n label: '校園',\n href: '/category/campus',\n subItems: [\n { label: '校園寶可夢', href: '/category/campus/campus-pokemon' },\n { label: '上課好好玩', href: '/category/campus/teaching' },\n { label: '小讀者連線', href: '/category/campus/joining' },\n ],\n },\n {\n label: 'Podcast',\n href: '/category/listening-news',\n subItems: [\n {\n label: '小記者，問什麼？',\n href: '/category/listening-news/kids-reporter-ask',\n },\n {\n label: '新聞讀報',\n href: '/category/listening-news/multilingual-listening-news',\n },\n {\n label: '新聞關鍵字',\n href: '/category/listening-news/listening-news-keywords',\n },\n {\n label: '文化關鍵字',\n href: '/category/listening-news/listening-news-culture-keywords',\n },\n ],\n },\n {\n label: '教案',\n href: '/category/classroom',\n subItems: [],\n },\n]\n\nexport const MY_READING_URL = '/myreading'\nexport const READING_SETTINGS_URL = '/custom'\n\nexport const ADDITIONAL_MENU_ITEMS: MenuItem[] = [\n {\n label: '我的回答',\n href: MY_READING_URL,\n subItems: [],\n showIcon: true,\n icon: <MyReadingIconSmall />,\n hideInFooter: true,\n },\n {\n label: '閱讀設定',\n href: READING_SETTINGS_URL,\n subItems: [],\n showIcon: true,\n icon: <SettingsIconSmall />,\n hideInFooter: true,\n },\n {\n label: '小讀者思辨牆',\n href: '/idea-hub',\n subItems: [],\n hideInFooter: true,\n },\n {\n label: '關於我們',\n href: '/about',\n subItems: [],\n },\n {\n label: '呼叫報導仔',\n href: '/about#call',\n subItems: [],\n },\n\n {\n label: '我要投稿',\n href: 'https://forms.gle/49AEG8kFj7QWjgij8',\n subItems: [],\n external: true,\n },\n {\n label: '加入小記者',\n href: 'https://forms.gle/eGq5jagNTwriwSCX6',\n subItems: [],\n external: true,\n },\n {\n label: '訂閱電子報',\n href: 'https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3',\n subItems: [],\n external: true,\n },\n {\n label: '訂閱Podcast',\n href: 'https://solink.soundon.fm/kidstwreporter',\n subItems: [],\n external: true,\n },\n {\n label: '聯絡我們',\n href: 'mailto:kidsnews@twreporter.org',\n subItems: [],\n },\n {\n label: '前往《報導者》',\n href: 'https://www.twreporter.org/',\n subItems: [],\n external: true,\n },\n]\n\nexport const SOCIAL_MEDIA_ITEMS = [\n {\n label: 'Facebook',\n href: 'https://www.facebook.com/twreporter/',\n },\n {\n label: 'Instagram',\n href: 'https://www.instagram.com/twreporter/',\n },\n {\n label: 'YouTube',\n href: 'https://www.youtube.com/@TwreporterOrg',\n },\n {\n label: 'Threads',\n href: 'https://www.threads.com/@twreporter',\n },\n {\n label: 'Medium',\n href: 'https://medium.com/twreporter',\n },\n {\n label: 'RSS',\n href: 'https://kids-storage.twreporter.org/rss/rss.xml',\n },\n]\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -145,10 +145,10 @@ function SearchInputSection(props) {
|
|
|
145
145
|
children: "\u71B1\u9580\u641C\u5C0B"
|
|
146
146
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
147
147
|
className: "gap-2.5 flex flex-wrap",
|
|
148
|
-
children: tags.map(keyword => /*#__PURE__*/(0, _jsxRuntime.
|
|
148
|
+
children: tags.map(keyword => /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
|
|
149
149
|
className: "px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white",
|
|
150
150
|
href: `/search?q=${encodeURIComponent(keyword)}`,
|
|
151
|
-
children:
|
|
151
|
+
children: keyword
|
|
152
152
|
}, keyword))
|
|
153
153
|
})]
|
|
154
154
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_hooks","_icons","_cn","_jsxRuntime","searchFormVariants","cva","variants","mode","inline","popover","isSearchOpen","true","false","compoundVariants","class","searchDropdownVariants","isFocused","compactMode","jsx","href","className","rel","children","src","alt","loading","cn","width","height","props","ref","useRef","setIsFocused","useState","searchValue","setSearchValue","tags","searchPlaceholder","useBodyScrollLock","toLock","lockID","useEffect","current","focus","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","joinUsUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","document","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","onHamburgerOverlayOpen","menuItems","small","reduce","acc","item","index","label","length","HamburgerIconSmall","HamburgerIcon"],"sources":["../../src/header/shared-components.tsx"],"sourcesContent":["'use client'\nimport { cva } from 'class-variance-authority'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Button, Input } from '../components'\nimport { useBodyScrollLock } from '../hooks'\nimport {\n ClearIcon,\n HamburgerIcon,\n HamburgerIconSmall,\n SearchIcon,\n} from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\n\nconst searchFormVariants = cva(\n 'ease-in-out h-full transition-all duration-300',\n {\n variants: {\n mode: {\n inline: 'h-11 w-full',\n popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n class: 'w-66 pointer-events-auto opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n ],\n }\n)\n\nconst searchDropdownVariants = cva(\n 'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',\n {\n variants: {\n mode: {\n inline: '',\n popover: 'top-12 -right-4 shadow-custom p-4 absolute',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n isFocused: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n isFocused: true,\n class: 'p-4 h-min opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n {\n mode: 'inline',\n isFocused: true,\n class:\n 'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',\n },\n {\n mode: 'inline',\n isFocused: false,\n class: '-translate-y-3 pointer-events-none w-full',\n },\n ],\n }\n)\n\nexport function LogoLink({ compactMode = false }: { compactMode?: boolean }) {\n return (\n <a href=\"/\" className=\"flex items-center\" rel=\"home\">\n <img\n src=\"/assets/images/brand-icon.svg\"\n alt=\"少年報導者 The Reporter for Kids\"\n loading=\"eager\"\n className={cn(\n 'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',\n compactMode && 'desktop:h-[26px]'\n )}\n width={293}\n height={32}\n />\n </a>\n )\n}\n\ntype SearchInputSectionProps =\n | {\n mode: 'popover'\n isSearchOpen: boolean\n tags: string[]\n searchPlaceholder: string\n }\n | {\n mode: 'inline'\n tags: string[]\n searchPlaceholder: string\n }\n\nexport function SearchInputSection(props: SearchInputSectionProps) {\n const ref = useRef<HTMLInputElement>(null)\n const [isFocused, setIsFocused] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n\n const mode = props.mode\n const isSearchOpen = mode === 'popover' && props.isSearchOpen\n const tags = props.tags\n const searchPlaceholder = props.searchPlaceholder\n\n useBodyScrollLock({\n toLock: mode === 'popover' && isSearchOpen,\n lockID: 'header-search-input',\n })\n\n useEffect(() => {\n if (mode === 'inline') {\n return\n }\n if (isSearchOpen) {\n ref.current?.focus()\n setIsFocused(true)\n return\n }\n setIsFocused(false)\n }, [mode, isSearchOpen])\n\n return (\n <div\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n className={mode === 'inline' ? 'relative w-full' : 'h-11'}\n >\n <form\n role=\"search\"\n method=\"get\"\n action=\"/search\"\n className={searchFormVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n })}\n >\n <Input\n placeholder={searchPlaceholder}\n name=\"q\"\n title=\"Search for...\"\n aria-label=\"Search for...\"\n className=\"w-[99%]\"\n inputRef={ref}\n onChange={setSearchValue}\n value={searchValue}\n mode=\"search\"\n />\n </form>\n <div\n className={searchDropdownVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n isFocused,\n })}\n >\n <h3 className=\"font-bold mb-3 prose-p3 text-neutral-700\">熱門搜尋</h3>\n <div className=\"gap-2.5 flex flex-wrap\">\n {tags.map((keyword) => (\n <a\n key={keyword}\n className=\"px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white\"\n href={`/search?q=${encodeURIComponent(keyword)}`}\n >\n #{keyword}\n </a>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nexport function ActionButtons({\n hideCtaButtons = false,\n tags,\n searchPlaceholder,\n subscribeUrl,\n joinUsUrl,\n}: {\n hideCtaButtons?: boolean\n tags: string[]\n searchPlaceholder: string\n subscribeUrl: string\n joinUsUrl: string\n}) {\n const [isSearchOpen, setIsSearchOpen] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const buttonRef = useRef<HTMLButtonElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const containerElement = containerRef.current\n const buttonElement = buttonRef.current\n if (!containerElement || !buttonElement) return\n if (\n !containerElement.contains(event.target as Node) &&\n !buttonElement.contains(event.target as Node)\n ) {\n setIsSearchOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [])\n\n return (\n <div className=\"relative flex items-center\">\n <div className=\"mr-6 relative flex items-center\" ref={containerRef}>\n {/* CTA Buttons - Base layer */}\n {!hideCtaButtons && !isSearchOpen && (\n <div className=\"gap-4 flex items-center\">\n <Button variant=\"secondary\" size={32} asChild>\n <a href={joinUsUrl}>加入我們</a>\n </Button>\n <Button variant=\"primary\" size={32} asChild>\n <a href={subscribeUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n 訂閱\n </a>\n </Button>\n </div>\n )}\n\n <SearchInputSection\n isSearchOpen={isSearchOpen}\n mode=\"popover\"\n tags={tags}\n searchPlaceholder={searchPlaceholder}\n />\n </div>\n\n <button\n className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n aria-label=\"搜尋\"\n onClick={() => setIsSearchOpen(!isSearchOpen)}\n ref={buttonRef}\n >\n {isSearchOpen ? <ClearIcon /> : <SearchIcon />}\n </button>\n </div>\n )\n}\n\nexport function BottomNavigation({\n onHamburgerOverlayOpen,\n menuItems,\n}: {\n onHamburgerOverlayOpen: () => void\n menuItems: MenuItem[]\n}) {\n return (\n <div className=\"py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border\">\n <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />\n\n {menuItems.reduce((acc, item, index) => {\n return [\n ...acc,\n <div key={item.label} className=\"flex items-center\">\n <a\n href={item.href}\n className=\"py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400\"\n >\n {item.label}\n </a>\n </div>,\n ...(index < menuItems.length - 1\n ? [\n <div\n key={`separator-${index}`}\n className=\"h-4 mx-2 w-px bg-neutral-border\"\n />,\n ]\n : []),\n ]\n }, [] as React.ReactNode[])}\n </div>\n )\n}\n\nexport function HamburgerButton({\n onHamburgerOverlayOpen,\n small = false,\n}: {\n onHamburgerOverlayOpen: () => void\n small?: boolean\n}) {\n return (\n <button\n className={cn(\n 'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',\n small ? 'w-6 h-6' : 'w-8 h-8'\n )}\n onClick={onHamburgerOverlayOpen}\n >\n {small ? <HamburgerIconSmall /> : <HamburgerIcon />}\n </button>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_hooks","_icons","_cn","_jsxRuntime","searchFormVariants","cva","variants","mode","inline","popover","isSearchOpen","true","false","compoundVariants","class","searchDropdownVariants","isFocused","compactMode","jsx","href","className","rel","children","src","alt","loading","cn","width","height","props","ref","useRef","setIsFocused","useState","searchValue","setSearchValue","tags","searchPlaceholder","useBodyScrollLock","toLock","lockID","useEffect","current","focus","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","joinUsUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","document","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","onHamburgerOverlayOpen","menuItems","small","reduce","acc","item","index","label","length","HamburgerIconSmall","HamburgerIcon"],"sources":["../../src/header/shared-components.tsx"],"sourcesContent":["'use client'\nimport { cva } from 'class-variance-authority'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Button, Input } from '../components'\nimport { useBodyScrollLock } from '../hooks'\nimport {\n ClearIcon,\n HamburgerIcon,\n HamburgerIconSmall,\n SearchIcon,\n} from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\n\nconst searchFormVariants = cva(\n 'ease-in-out h-full transition-all duration-300',\n {\n variants: {\n mode: {\n inline: 'h-11 w-full',\n popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n class: 'w-66 pointer-events-auto opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n ],\n }\n)\n\nconst searchDropdownVariants = cva(\n 'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',\n {\n variants: {\n mode: {\n inline: '',\n popover: 'top-12 -right-4 shadow-custom p-4 absolute',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n isFocused: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n isFocused: true,\n class: 'p-4 h-min opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n {\n mode: 'inline',\n isFocused: true,\n class:\n 'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',\n },\n {\n mode: 'inline',\n isFocused: false,\n class: '-translate-y-3 pointer-events-none w-full',\n },\n ],\n }\n)\n\nexport function LogoLink({ compactMode = false }: { compactMode?: boolean }) {\n return (\n <a href=\"/\" className=\"flex items-center\" rel=\"home\">\n <img\n src=\"/assets/images/brand-icon.svg\"\n alt=\"少年報導者 The Reporter for Kids\"\n loading=\"eager\"\n className={cn(\n 'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',\n compactMode && 'desktop:h-[26px]'\n )}\n width={293}\n height={32}\n />\n </a>\n )\n}\n\ntype SearchInputSectionProps =\n | {\n mode: 'popover'\n isSearchOpen: boolean\n tags: string[]\n searchPlaceholder: string\n }\n | {\n mode: 'inline'\n tags: string[]\n searchPlaceholder: string\n }\n\nexport function SearchInputSection(props: SearchInputSectionProps) {\n const ref = useRef<HTMLInputElement>(null)\n const [isFocused, setIsFocused] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n\n const mode = props.mode\n const isSearchOpen = mode === 'popover' && props.isSearchOpen\n const tags = props.tags\n const searchPlaceholder = props.searchPlaceholder\n\n useBodyScrollLock({\n toLock: mode === 'popover' && isSearchOpen,\n lockID: 'header-search-input',\n })\n\n useEffect(() => {\n if (mode === 'inline') {\n return\n }\n if (isSearchOpen) {\n ref.current?.focus()\n setIsFocused(true)\n return\n }\n setIsFocused(false)\n }, [mode, isSearchOpen])\n\n return (\n <div\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n className={mode === 'inline' ? 'relative w-full' : 'h-11'}\n >\n <form\n role=\"search\"\n method=\"get\"\n action=\"/search\"\n className={searchFormVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n })}\n >\n <Input\n placeholder={searchPlaceholder}\n name=\"q\"\n title=\"Search for...\"\n aria-label=\"Search for...\"\n className=\"w-[99%]\"\n inputRef={ref}\n onChange={setSearchValue}\n value={searchValue}\n mode=\"search\"\n />\n </form>\n <div\n className={searchDropdownVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n isFocused,\n })}\n >\n <h3 className=\"font-bold mb-3 prose-p3 text-neutral-700\">熱門搜尋</h3>\n <div className=\"gap-2.5 flex flex-wrap\">\n {tags.map((keyword) => (\n <a\n key={keyword}\n className=\"px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white\"\n href={`/search?q=${encodeURIComponent(keyword)}`}\n >\n {keyword}\n </a>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nexport function ActionButtons({\n hideCtaButtons = false,\n tags,\n searchPlaceholder,\n subscribeUrl,\n joinUsUrl,\n}: {\n hideCtaButtons?: boolean\n tags: string[]\n searchPlaceholder: string\n subscribeUrl: string\n joinUsUrl: string\n}) {\n const [isSearchOpen, setIsSearchOpen] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const buttonRef = useRef<HTMLButtonElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const containerElement = containerRef.current\n const buttonElement = buttonRef.current\n if (!containerElement || !buttonElement) return\n if (\n !containerElement.contains(event.target as Node) &&\n !buttonElement.contains(event.target as Node)\n ) {\n setIsSearchOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [])\n\n return (\n <div className=\"relative flex items-center\">\n <div className=\"mr-6 relative flex items-center\" ref={containerRef}>\n {/* CTA Buttons - Base layer */}\n {!hideCtaButtons && !isSearchOpen && (\n <div className=\"gap-4 flex items-center\">\n <Button variant=\"secondary\" size={32} asChild>\n <a href={joinUsUrl}>加入我們</a>\n </Button>\n <Button variant=\"primary\" size={32} asChild>\n <a href={subscribeUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n 訂閱\n </a>\n </Button>\n </div>\n )}\n\n <SearchInputSection\n isSearchOpen={isSearchOpen}\n mode=\"popover\"\n tags={tags}\n searchPlaceholder={searchPlaceholder}\n />\n </div>\n\n <button\n className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n aria-label=\"搜尋\"\n onClick={() => setIsSearchOpen(!isSearchOpen)}\n ref={buttonRef}\n >\n {isSearchOpen ? <ClearIcon /> : <SearchIcon />}\n </button>\n </div>\n )\n}\n\nexport function BottomNavigation({\n onHamburgerOverlayOpen,\n menuItems,\n}: {\n onHamburgerOverlayOpen: () => void\n menuItems: MenuItem[]\n}) {\n return (\n <div className=\"py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border\">\n <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />\n\n {menuItems.reduce((acc, item, index) => {\n return [\n ...acc,\n <div key={item.label} className=\"flex items-center\">\n <a\n href={item.href}\n className=\"py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400\"\n >\n {item.label}\n </a>\n </div>,\n ...(index < menuItems.length - 1\n ? [\n <div\n key={`separator-${index}`}\n className=\"h-4 mx-2 w-px bg-neutral-border\"\n />,\n ]\n : []),\n ]\n }, [] as React.ReactNode[])}\n </div>\n )\n}\n\nexport function HamburgerButton({\n onHamburgerOverlayOpen,\n small = false,\n}: {\n onHamburgerOverlayOpen: () => void\n small?: boolean\n}) {\n return (\n <button\n className={cn(\n 'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',\n small ? 'w-6 h-6' : 'w-8 h-8'\n )}\n onClick={onHamburgerOverlayOpen}\n >\n {small ? <HamburgerIconSmall /> : <HamburgerIcon />}\n </button>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|