@kids-reporter/routing-ui 0.1.0-alpha.1

package/dist/header/menu/header-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-menu-item.js","names":["_cn","require","_headerContext","_jsxRuntime","HeaderMenuItem","label","href","subItems","external","showIcon","icon","isExpanded","contentClassName","onExpand","hasSubItems","length","context","useHeaderContext","closeMenu","handleExpand","content","jsxs","className","cn","children","jsx","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","onClick","map","subItem","index","target","rel","_default","exports","default"],"sources":["../../../src/header/menu/header-menu-item.tsx"],"sourcesContent":["import { MenuItem } from '../../types'\nimport { cn } from '../../utils/cn'\nimport { useHeaderContext } from '../header-context'\n\ntype HeaderMenuItemProps = {\n  contentClassName?: string\n  isExpanded?: boolean\n  onExpand?: (label: string | null) => void\n} & MenuItem\n\nfunction HeaderMenuItem({\n  label,\n  href,\n  subItems,\n  external,\n  showIcon,\n  icon,\n  isExpanded,\n  contentClassName,\n  onExpand,\n}: HeaderMenuItemProps) {\n  const hasSubItems = subItems && subItems.length > 0\n  const context = useHeaderContext()\n  const closeMenu = context?.closeMenu\n\n  const handleExpand = () => {\n    if (hasSubItems) {\n      onExpand?.(isExpanded ? null : label)\n    }\n  }\n\n  const content = (\n    <div\n      className={cn(\n        'group flex w-full items-center justify-between text-neutral-900 transition-colors duration-100 group-hover:text-neutral-900',\n        contentClassName\n      )}\n    >\n      <div className=\"gap-2 flex items-center\">\n        {showIcon && icon && (\n          <div className=\"w-4 h-4 flex items-center justify-center\">{icon}</div>\n        )}\n        <span\n          className={cn(\n            'prose-p1-bold',\n            isExpanded && 'text-red-400 group-hover:text-red-400'\n          )}\n        >\n          {label}\n        </span>\n      </div>\n\n      {hasSubItems && (\n        <div\n          className={cn(\n            'w-6 h-6 flex items-center justify-center transition-transform',\n            isExpanded && 'rotate-180 text-red-400 group-hover:text-red-400'\n          )}\n        >\n          <svg width=\"14\" height=\"7\" viewBox=\"0 0 14 7\" fill=\"none\">\n            <path\n              d=\"M1 1L7 6L13 1\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </div>\n      )}\n    </div>\n  )\n\n  if (hasSubItems) {\n    return (\n      <div className=\"w-full\">\n        <button\n          onClick={handleExpand}\n          className=\"px-6 tablet:px-8 py-2 flex w-full cursor-pointer items-center justify-between transition-colors duration-200 hover:bg-neutral-black/5 active:bg-neutral-black/10\"\n        >\n          {content}\n        </button>\n        <div\n          className={cn(\n            'ease-in-out overflow-hidden transition-all duration-300',\n            isExpanded ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'\n          )}\n        >\n          {subItems.map((subItem, index) => (\n            <a\n              key={index}\n              href={subItem.href}\n              className=\"px-6 tablet:px-12 py-2 pl-12 prose-p2 font-medium block transition-colors duration-200 hover:bg-neutral-black/5 hover:text-neutral-900 active:bg-neutral-black/10\"\n              onClick={closeMenu}\n            >\n              {subItem.label}\n            </a>\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  if (external) {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={\n          'px-6 tablet:px-8 py-2 block transition-colors duration-200 hover:bg-neutral-black/5 active:bg-neutral-black/10'\n        }\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <a\n      href={href}\n      className={\n        'px-6 tablet:px-8 py-2 block transition-colors duration-200 hover:bg-neutral-black/5 active:bg-neutral-black/10'\n      }\n      onClick={closeMenu}\n    >\n      {content}\n    </a>\n  )\n}\n\nexport default HeaderMenuItem\n"],"mappings":"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"}

package/dist/header/menu/index.d.ts

@@ -0,0 +1,15 @@
+import type { MenuItem, SocialMediaHrefs } from '../../types';
+type MenuProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    keywords: string[];
+    menuItems: MenuItem[];
+    additionalMenuItems: MenuItem[];
+    socialMediaHrefs: SocialMediaHrefs;
+    donateUrl: string;
+    subscribeUrl: string;
+    searchPlaceholder: string;
+};
+declare function Menu({ isOpen, onClose, keywords, menuItems, additionalMenuItems, socialMediaHrefs, donateUrl, subscribeUrl, searchPlaceholder, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export default Menu;
+//# sourceMappingURL=index.d.ts.map

package/dist/header/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/menu/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAO7D,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,mBAAmB,EAAE,QAAQ,EAAE,CAAA;IAC/B,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAUD,iBAAS,IAAI,CAAC,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAClB,EAAE,SAAS,2CA+JX;AAED,eAAe,IAAI,CAAA"}

package/dist/header/menu/index.js

@@ -0,0 +1,170 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _image = _interopRequireDefault(require("next/image"));
+var _react = require("react");
+var _button = _interopRequireDefault(require("../../components/button"));
+var _icons = require("../../icons");
+var _cn = require("../../utils/cn");
+var _generateSocialMediaConfig = require("../../utils/generate-social-media-config");
+var _sharedComponents = require("../shared-components");
+var _headerMenuItem = _interopRequireDefault(require("./header-menu-item"));
+var _headerMenuItemGroup = _interopRequireDefault(require("./header-menu-item-group"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Divider() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "px-6 tablet:px-8 py-4 w-full",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "h-px w-full bg-neutral-300"
+    })
+  });
+}
+function Menu({
+  isOpen,
+  onClose,
+  keywords,
+  menuItems,
+  additionalMenuItems,
+  socialMediaHrefs,
+  donateUrl,
+  subscribeUrl,
+  searchPlaceholder
+}) {
+  const socialMediaConfig = (0, _generateSocialMediaConfig.generateSocialMediaConfig)(socialMediaHrefs);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      document.body.classList.add('no-scroll');
+    } else {
+      document.body.classList.remove('no-scroll');
+    }
+    return () => {
+      document.body.classList.remove('no-scroll');
+    };
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    const handleEscape = e => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, onClose]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _cn.cn)('inset-0 fixed z-1001 bg-neutral-500/50 transition-opacity duration-300', isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'),
+      onClick: onClose
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _cn.cn)('top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out scrollbar-thin tablet:pt-0 fixed z-1001 h-full w-full transform pt-(--mobile-header-height) transition-transform duration-300', isOpen ? 'translate-x-0' : '-translate-x-full'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "flex h-full flex-col overflow-y-auto",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "flex items-center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              href: "/",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
+                src: "/assets/images/brand-icon.svg",
+                alt: "\u5C11\u5E74\u5831\u5C0E\u8005 The Reporter for Kids",
+                className: "h-5",
+                height: 20,
+                width: 183,
+                loading: "eager"
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            onClick: onClose,
+            className: "w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800",
+            "aria-label": "\u95DC\u9589\u9078\u55AE",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClearIcon, {})
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "px-6 tablet:px-8 pt-4 desktop:hidden",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedComponents.SearchInputSection, {
+            mode: "inline",
+            tags: keywords,
+            searchPlaceholder: searchPlaceholder
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "py-4 flex-1",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_headerMenuItem.default, {
+            ...menuItems?.[0]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "py-2",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_headerMenuItemGroup.default, {
+              isMenuOpen: isOpen,
+              menuItems: menuItems
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_headerMenuItem.default, {
+            ...additionalMenuItems?.[0],
+            contentClassName: "text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "py-2",
+            children: additionalMenuItems.slice(1).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_headerMenuItem.default, {
+              label: item.label,
+              href: item.href,
+              external: item.external,
+              contentClassName: "text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900"
+            }, index))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "px-6 tablet:px-8",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "gap-4 tablet:gap-0 px-4 flex items-center justify-center tablet:justify-between",
+              children: socialMediaConfig.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: item.href,
+                className: "text-neutral-900 transition-colors duration-200 hover:text-red-500",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": item.label,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "w-6 h-6 flex items-center justify-center",
+                  children: item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(item.icon, {})
+                })
+              }, item.label))
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "px-6 tablet:px-8 py-6 tablet:pt-6 tablet:pb-8",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "gap-4 flex flex-col",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+              variant: "secondary",
+              size: 44,
+              asChild: true,
+              className: "w-full",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: subscribeUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "\u8A02\u95B1\u96FB\u5B50\u5831"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+              variant: "primary",
+              size: 44,
+              asChild: true,
+              className: "w-full",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: donateUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "\u8D0A\u52A9\u6211\u5011"
+              })
+            })]
+          })
+        })]
+      })
+    })]
+  });
+}
+var _default = exports.default = Menu;
+//# sourceMappingURL=index.js.map

package/dist/header/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_image","_react","_button","_icons","_cn","_generateSocialMediaConfig","_sharedComponents","_headerMenuItem","_headerMenuItemGroup","_jsxRuntime","Divider","jsx","className","children","Menu","isOpen","onClose","keywords","menuItems","additionalMenuItems","socialMediaHrefs","donateUrl","subscribeUrl","searchPlaceholder","socialMediaConfig","generateSocialMediaConfig","useEffect","document","body","classList","add","remove","handleEscape","e","key","addEventListener","removeEventListener","jsxs","Fragment","cn","onClick","href","src","alt","height","width","loading","ClearIcon","SearchInputSection","mode","tags","isMenuOpen","contentClassName","slice","map","item","index","label","external","target","rel","icon","variant","size","asChild","_default"],"sources":["../../../src/header/menu/index.tsx"],"sourcesContent":["'use client'\n\nimport Image from 'next/image'\nimport { useEffect } from 'react'\n\nimport Button from '../../components/button'\nimport { ClearIcon } from '../../icons'\nimport type { MenuItem, SocialMediaHrefs } from '../../types'\nimport { cn } from '../../utils/cn'\nimport { generateSocialMediaConfig } from '../../utils/generate-social-media-config'\nimport { SearchInputSection } from '../shared-components'\nimport HeaderMenuItem from './header-menu-item'\nimport HeaderMenuItemGroup from './header-menu-item-group'\n\ntype MenuProps = {\n  isOpen: boolean\n  onClose: () => void\n  keywords: string[]\n  menuItems: MenuItem[]\n  additionalMenuItems: MenuItem[]\n  socialMediaHrefs: SocialMediaHrefs\n  donateUrl: string\n  subscribeUrl: string\n  searchPlaceholder: string\n}\n\nfunction Divider() {\n  return (\n    <div className=\"px-6 tablet:px-8 py-4 w-full\">\n      <div className=\"h-px w-full bg-neutral-300\"></div>\n    </div>\n  )\n}\n\nfunction Menu({\n  isOpen,\n  onClose,\n  keywords,\n  menuItems,\n  additionalMenuItems,\n  socialMediaHrefs,\n  donateUrl,\n  subscribeUrl,\n  searchPlaceholder,\n}: MenuProps) {\n  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.classList.add('no-scroll')\n    } else {\n      document.body.classList.remove('no-scroll')\n    }\n\n    return () => {\n      document.body.classList.remove('no-scroll')\n    }\n  }, [isOpen])\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose()\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape)\n    }\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape)\n    }\n  }, [isOpen, onClose])\n\n  return (\n    <>\n      {/* Overlay */}\n      <div\n        className={cn(\n          'inset-0 fixed z-1001 bg-neutral-500/50 transition-opacity duration-300',\n          isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'\n        )}\n        onClick={onClose}\n      />\n\n      {/* Menu */}\n      <div\n        className={cn(\n          'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out scrollbar-thin tablet:pt-0 fixed z-1001 h-full w-full transform pt-(--mobile-header-height) transition-transform duration-300',\n          isOpen ? 'translate-x-0' : '-translate-x-full'\n        )}\n      >\n        <div className=\"flex h-full flex-col overflow-y-auto\">\n          <div className=\"px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex\">\n            <div className=\"flex items-center\">\n              <a href=\"/\">\n                <Image\n                  src=\"/assets/images/brand-icon.svg\"\n                  alt=\"少年報導者 The Reporter for Kids\"\n                  className=\"h-5\"\n                  height={20}\n                  width={183}\n                  loading=\"eager\"\n                />\n              </a>\n            </div>\n            <button\n              onClick={onClose}\n              className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800\"\n              aria-label=\"關閉選單\"\n            >\n              <ClearIcon />\n            </button>\n          </div>\n\n          <div className=\"px-6 tablet:px-8 pt-4 desktop:hidden\">\n            <SearchInputSection\n              mode=\"inline\"\n              tags={keywords}\n              searchPlaceholder={searchPlaceholder}\n            />\n          </div>\n\n          <div className=\"py-4 flex-1\">\n            <HeaderMenuItem {...menuItems?.[0]} />\n\n            <Divider />\n\n            {/* Categories */}\n            <div className=\"py-2\">\n              <HeaderMenuItemGroup isMenuOpen={isOpen} menuItems={menuItems} />\n            </div>\n\n            <Divider />\n\n            {/* Reading Settings */}\n            <HeaderMenuItem\n              {...additionalMenuItems?.[0]}\n              contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n            />\n\n            <Divider />\n\n            {/* About Us Section */}\n            <div className=\"py-2\">\n              {additionalMenuItems.slice(1).map((item, index) => (\n                <HeaderMenuItem\n                  key={index}\n                  label={item.label}\n                  href={item.href}\n                  external={item.external}\n                  contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n                />\n              ))}\n            </div>\n\n            <Divider />\n\n            {/* Social Media */}\n            <div className=\"px-6 tablet:px-8\">\n              <div className=\"gap-4 tablet:gap-0 px-4 flex items-center justify-center tablet:justify-between\">\n                {socialMediaConfig.map((item) => (\n                  <a\n                    key={item.label}\n                    href={item.href}\n                    className=\"text-neutral-900 transition-colors duration-200 hover:text-red-500\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    aria-label={item.label}\n                  >\n                    <div className=\"w-6 h-6 flex items-center justify-center\">\n                      {item.icon && <item.icon />}\n                    </div>\n                  </a>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Action Buttons */}\n          <div className=\"px-6 tablet:px-8 py-6 tablet:pt-6 tablet:pb-8\">\n            <div className=\"gap-4 flex flex-col\">\n              <Button variant=\"secondary\" size={44} asChild className=\"w-full\">\n                <a\n                  href={subscribeUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  訂閱電子報\n                </a>\n              </Button>\n              <Button variant=\"primary\" size={44} asChild className=\"w-full\">\n                <a href={donateUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n                  贊助我們\n                </a>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Menu\n"],"mappings":"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"}

package/dist/header/mobile-header.d.ts

@@ -0,0 +1,9 @@
+type MobileHeaderProps = {
+    onHamburgerOverlayOpen: () => void;
+    onCloseMenu: () => void;
+    showCloseButtonWhenMenuOpen: boolean;
+    isMenuOpen: boolean;
+};
+export declare function MobileHeader({ onHamburgerOverlayOpen, onCloseMenu, showCloseButtonWhenMenuOpen, isMenuOpen, }: MobileHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=mobile-header.d.ts.map

package/dist/header/mobile-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-header.d.ts","sourceRoot":"","sources":["../../src/header/mobile-header.tsx"],"names":[],"mappings":"AAMA,KAAK,iBAAiB,GAAG;IACvB,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,2BAA2B,EAAE,OAAO,CAAA;IACpC,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,sBAAsB,EACtB,WAAW,EACX,2BAA2B,EAC3B,UAAU,GACX,EAAE,iBAAiB,2CA0CnB"}

package/dist/header/mobile-header.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileHeader = MobileHeader;
+var _icons = require("../icons");
+var _cn = require("../utils/cn");
+var _sharedComponents = require("./shared-components");
+var _jsxRuntime = require("react/jsx-runtime");
+function MobileHeader({
+  onHamburgerOverlayOpen,
+  onCloseMenu,
+  showCloseButtonWhenMenuOpen,
+  isMenuOpen
+}) {
+  const showCloseButton = showCloseButtonWhenMenuOpen && isMenuOpen;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "h-(--mobile-header-height) desktop:hidden"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _cn.cn)('px-6 tablet:px-8 ease-in-out top-0 translate-y-0 pointer-events-auto fixed z-1002 w-full bg-neutral-white opacity-100 transition-all duration-300 tablet:z-1000 desktop:hidden'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "py-4 flex items-center justify-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedComponents.LogoLink, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "gap-4 flex items-center",
+          children: [!showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: "/login",
+            className: "w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500",
+            "aria-label": "\u767B\u5165",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoginIcon, {})
+          }), showCloseButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            onClick: onCloseMenu,
+            className: "w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800",
+            "aria-label": "\u95DC\u9589\u9078\u55AE",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClearIcon, {})
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedComponents.HamburgerButton, {
+            onHamburgerOverlayOpen: onHamburgerOverlayOpen
+          })]
+        })]
+      })
+    })]
+  });
+}
+//# sourceMappingURL=mobile-header.js.map

package/dist/header/mobile-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-header.js","names":["Object","defineProperty","exports","value","MobileHeader","_icons","require","_cn","_sharedComponents","_jsxRuntime","onHamburgerOverlayOpen","onCloseMenu","showCloseButtonWhenMenuOpen","isMenuOpen","showCloseButton","jsxs","Fragment","children","jsx","className","cn","LogoLink","href","LoginIcon","onClick","ClearIcon","HamburgerButton"],"sources":["../../src/header/mobile-header.tsx"],"sourcesContent":["'use client'\n\nimport { ClearIcon, LoginIcon } from '../icons'\nimport { cn } from '../utils/cn'\nimport { HamburgerButton, LogoLink } from './shared-components'\n\ntype MobileHeaderProps = {\n  onHamburgerOverlayOpen: () => void\n  onCloseMenu: () => void\n  showCloseButtonWhenMenuOpen: boolean\n  isMenuOpen: boolean\n}\n\nexport function MobileHeader({\n  onHamburgerOverlayOpen,\n  onCloseMenu,\n  showCloseButtonWhenMenuOpen,\n  isMenuOpen,\n}: MobileHeaderProps) {\n  const showCloseButton = showCloseButtonWhenMenuOpen && isMenuOpen\n\n  return (\n    <>\n      <div className=\"h-(--mobile-header-height) desktop:hidden\"></div>\n      <div\n        className={cn(\n          'px-6 tablet:px-8 ease-in-out top-0 translate-y-0 pointer-events-auto fixed z-1002 w-full bg-neutral-white opacity-100 transition-all duration-300 tablet:z-1000 desktop:hidden'\n        )}\n      >\n        <div className=\"py-4 flex items-center justify-between\">\n          <LogoLink />\n\n          <div className=\"gap-4 flex items-center\">\n            {!showCloseButton && (\n              <a\n                href=\"/login\"\n                className=\"w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500\"\n                aria-label=\"登入\"\n              >\n                <LoginIcon />\n              </a>\n            )}\n            {showCloseButton ? (\n              <button\n                onClick={onCloseMenu}\n                className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800\"\n                aria-label=\"關閉選單\"\n              >\n                <ClearIcon />\n              </button>\n            ) : (\n              <HamburgerButton\n                onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n              />\n            )}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n"],"mappings":";AAAA,YAAY;;AAAAA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,YAAA,GAAAA,YAAA;AAEZ,IAAAC,MAAA,GAAAC,OAAA;AACA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAA+D,IAAAG,WAAA,GAAAH,OAAA;AASxD,SAASF,YAAYA,CAAC;EAC3BM,sBAAsB;EACtBC,WAAW;EACXC,2BAA2B;EAC3BC;AACiB,CAAC,EAAE;EACpB,MAAMC,eAAe,GAAGF,2BAA2B,IAAIC,UAAU;EAEjE,oBACE,IAAAJ,WAAA,CAAAM,IAAA,EAAAN,WAAA,CAAAO,QAAA;IAAAC,QAAA,gBACE,IAAAR,WAAA,CAAAS,GAAA;MAAKC,SAAS,EAAC;IAA2C,CAAM,CAAC,eACjE,IAAAV,WAAA,CAAAS,GAAA;MACEC,SAAS,EAAE,IAAAC,MAAE,EACX,gLACF,CAAE;MAAAH,QAAA,eAEF,IAAAR,WAAA,CAAAM,IAAA;QAAKI,SAAS,EAAC,wCAAwC;QAAAF,QAAA,gBACrD,IAAAR,WAAA,CAAAS,GAAA,EAACV,iBAAA,CAAAa,QAAQ,IAAE,CAAC,eAEZ,IAAAZ,WAAA,CAAAM,IAAA;UAAKI,SAAS,EAAC,yBAAyB;UAAAF,QAAA,GACrC,CAACH,eAAe,iBACf,IAAAL,WAAA,CAAAS,GAAA;YACEI,IAAI,EAAC,QAAQ;YACbH,SAAS,EAAC,sHAAsH;YAChI,cAAW,cAAI;YAAAF,QAAA,eAEf,IAAAR,WAAA,CAAAS,GAAA,EAACb,MAAA,CAAAkB,SAAS,IAAE;UAAC,CACZ,CACJ,EACAT,eAAe,gBACd,IAAAL,WAAA,CAAAS,GAAA;YACEM,OAAO,EAAEb,WAAY;YACrBQ,SAAS,EAAC,6IAA6I;YACvJ,cAAW,0BAAM;YAAAF,QAAA,eAEjB,IAAAR,WAAA,CAAAS,GAAA,EAACb,MAAA,CAAAoB,SAAS,IAAE;UAAC,CACP,CAAC,gBAET,IAAAhB,WAAA,CAAAS,GAAA,EAACV,iBAAA,CAAAkB,eAAe;YACdhB,sBAAsB,EAAEA;UAAuB,CAChD,CACF;QAAA,CACE,CAAC;MAAA,CACH;IAAC,CACH,CAAC;EAAA,CACN,CAAC;AAEP"}

package/dist/header/post-title-setter.d.ts

@@ -0,0 +1,6 @@
+type PostTitleSetterProps = {
+    postTitle?: string;
+};
+declare function PostTitleSetter({ postTitle }: PostTitleSetterProps): null;
+export default PostTitleSetter;
+//# sourceMappingURL=post-title-setter.d.ts.map

package/dist/header/post-title-setter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-title-setter.d.ts","sourceRoot":"","sources":["../../src/header/post-title-setter.tsx"],"names":[],"mappings":"AAMA,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB,QAS3D;AAED,eAAe,eAAe,CAAA"}

package/dist/header/post-title-setter.js

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _headerContext = require("./header-context");
+function PostTitleSetter({
+  postTitle
+}) {
+  const context = (0, _headerContext.useHeaderContext)();
+  const setPostTitle = context?.setPostTitle;
+  (0, _react.useEffect)(() => {
+    setPostTitle?.(postTitle);
+    return () => setPostTitle?.(undefined);
+  }, [postTitle, setPostTitle]);
+  return null;
+}
+var _default = exports.default = PostTitleSetter;
+//# sourceMappingURL=post-title-setter.js.map

package/dist/header/post-title-setter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-title-setter.js","names":["Object","defineProperty","exports","value","default","_react","require","_headerContext","PostTitleSetter","postTitle","context","useHeaderContext","setPostTitle","useEffect","undefined","_default"],"sources":["../../src/header/post-title-setter.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport { useHeaderContext } from './header-context'\n\ntype PostTitleSetterProps = {\n  postTitle?: string\n}\n\nfunction PostTitleSetter({ postTitle }: PostTitleSetterProps) {\n  const context = useHeaderContext()\n  const setPostTitle = context?.setPostTitle\n  useEffect(() => {\n    setPostTitle?.(postTitle)\n    return () => setPostTitle?.(undefined)\n  }, [postTitle, setPostTitle])\n\n  return null\n}\n\nexport default PostTitleSetter\n"],"mappings":";AAAA,YAAY;;AAAAA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA;AAEZ,IAAAC,MAAA,GAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAMA,SAASE,eAAeA,CAAC;EAAEC;AAAgC,CAAC,EAAE;EAC5D,MAAMC,OAAO,GAAG,IAAAC,+BAAgB,EAAC,CAAC;EAClC,MAAMC,YAAY,GAAGF,OAAO,EAAEE,YAAY;EAC1C,IAAAC,gBAAS,EAAC,MAAM;IACdD,YAAY,GAAGH,SAAS,CAAC;IACzB,OAAO,MAAMG,YAAY,GAAGE,SAAS,CAAC;EACxC,CAAC,EAAE,CAACL,SAAS,EAAEG,YAAY,CAAC,CAAC;EAE7B,OAAO,IAAI;AACb;AAAC,IAAAG,QAAA,GAAAb,OAAA,CAAAE,OAAA,GAEcI,eAAe"}

package/dist/header/shared-components.d.ts

@@ -0,0 +1,31 @@
+import type { MenuItem } from '../types';
+export declare function LogoLink({ compactMode }: {
+    compactMode?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+type SearchInputSectionProps = {
+    mode: 'popover';
+    isSearchOpen: boolean;
+    tags: string[];
+    searchPlaceholder: string;
+} | {
+    mode: 'inline';
+    tags: string[];
+    searchPlaceholder: string;
+};
+export declare function SearchInputSection(props: SearchInputSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionButtons({ hideCtaButtons, tags, searchPlaceholder, subscribeUrl, }: {
+    hideCtaButtons?: boolean;
+    tags: string[];
+    searchPlaceholder: string;
+    subscribeUrl: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function BottomNavigation({ onHamburgerOverlayOpen, menuItems, }: {
+    onHamburgerOverlayOpen: () => void;
+    menuItems: MenuItem[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function HamburgerButton({ onHamburgerOverlayOpen, small, }: {
+    onHamburgerOverlayOpen: () => void;
+    small?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shared-components.d.ts.map

package/dist/header/shared-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-components.d.ts","sourceRoot":"","sources":["../../src/header/shared-components.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AA2ExC,wBAAgB,QAAQ,CAAC,EAAE,WAAmB,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,2CAgB1E;AAED,KAAK,uBAAuB,GACxB;IACE,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAwEhE;AAED,wBAAgB,aAAa,CAAC,EAC5B,cAAsB,EACtB,IAAI,EACJ,iBAAiB,EACjB,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;CACrB,2CAkEA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,sBAAsB,EACtB,SAAS,GACV,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB,2CA4BA;AAED,wBAAgB,eAAe,CAAC,EAC9B,sBAAsB,EACtB,KAAa,GACd,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,2CAYA"}

package/dist/header/shared-components.js

@@ -0,0 +1,256 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionButtons = ActionButtons;
+exports.BottomNavigation = BottomNavigation;
+exports.HamburgerButton = HamburgerButton;
+exports.LogoLink = LogoLink;
+exports.SearchInputSection = SearchInputSection;
+var _classVarianceAuthority = require("class-variance-authority");
+var _image = _interopRequireDefault(require("next/image"));
+var _react = require("react");
+var _components = require("../components");
+var _icons = require("../icons");
+var _cn = require("../utils/cn");
+var _jsxRuntime = require("react/jsx-runtime");
+const searchFormVariants = (0, _classVarianceAuthority.cva)('ease-in-out h-full transition-all duration-300', {
+  variants: {
+    mode: {
+      inline: 'h-11 w-full',
+      popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0'
+    },
+    isSearchOpen: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    mode: 'popover',
+    isSearchOpen: true,
+    class: 'w-66 pointer-events-auto opacity-100'
+  }, {
+    mode: 'popover',
+    isSearchOpen: false,
+    class: 'pointer-events-none'
+  }]
+});
+const searchDropdownVariants = (0, _classVarianceAuthority.cva)('rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200', {
+  variants: {
+    mode: {
+      inline: '',
+      popover: 'top-12 -right-4 shadow-custom p-4 absolute'
+    },
+    isSearchOpen: {
+      true: '',
+      false: ''
+    },
+    isFocused: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    mode: 'popover',
+    isSearchOpen: true,
+    isFocused: true,
+    class: 'p-4 h-min opacity-100'
+  }, {
+    mode: 'popover',
+    isSearchOpen: false,
+    class: 'pointer-events-none'
+  }, {
+    mode: 'inline',
+    isFocused: true,
+    class: 'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100'
+  }, {
+    mode: 'inline',
+    isFocused: false,
+    class: '-translate-y-3 pointer-events-none w-full'
+  }]
+});
+function LogoLink({
+  compactMode = false
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+    href: "/",
+    className: "flex items-center",
+    rel: "home",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
+      src: "/assets/images/brand-icon.svg",
+      alt: "\u5C11\u5E74\u5831\u5C0E\u8005 The Reporter for Kids",
+      loading: "eager",
+      className: (0, _cn.cn)('h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500', compactMode && 'desktop:h-[26px]'),
+      width: 293,
+      height: 32
+    })
+  });
+}
+function SearchInputSection(props) {
+  const ref = (0, _react.useRef)(null);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const mode = props.mode;
+  const isSearchOpen = mode === 'popover' && props.isSearchOpen;
+  const tags = props.tags;
+  const searchPlaceholder = props.searchPlaceholder;
+  (0, _react.useEffect)(() => {
+    if (mode === 'inline') {
+      return;
+    }
+    if (isSearchOpen) {
+      ref.current?.focus();
+      setIsFocused(true);
+      document.body.classList.add('no-scroll');
+      return;
+    }
+    setIsFocused(false);
+    document.body.classList.remove('no-scroll');
+  }, [mode, isSearchOpen]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    className: mode === 'inline' ? 'relative w-full' : 'h-11',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
+      role: "search",
+      method: "get",
+      action: "/search",
+      className: searchFormVariants({
+        mode,
+        isSearchOpen: mode === 'popover' ? isSearchOpen : undefined
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input, {
+        placeholder: searchPlaceholder,
+        name: "q",
+        title: "Search for...",
+        "aria-label": "Search for...",
+        className: "w-[99%]",
+        inputRef: ref,
+        onChange: setSearchValue,
+        value: searchValue
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: searchDropdownVariants({
+        mode,
+        isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,
+        isFocused
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        className: "prose-p3 font-bold mb-3 text-neutral-700",
+        children: "\u71B1\u9580\u641C\u5C0B"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "gap-2.5 flex flex-wrap",
+        children: tags.map(keyword => /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+          className: "px-3 py-1 prose-p2 font-bold cursor-pointer rounded-full bg-neutral-200 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white",
+          href: `/search?q=${encodeURIComponent(keyword)}`,
+          children: ["#", keyword]
+        }, keyword))
+      })]
+    })]
+  });
+}
+function ActionButtons({
+  hideCtaButtons = false,
+  tags,
+  searchPlaceholder,
+  subscribeUrl
+}) {
+  const [isSearchOpen, setIsSearchOpen] = (0, _react.useState)(false);
+  const containerRef = (0, _react.useRef)(null);
+  const buttonRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const handleClickOutside = event => {
+      const containerElement = containerRef.current;
+      const buttonElement = buttonRef.current;
+      if (!containerElement || !buttonElement) return;
+      if (!containerElement.contains(event.target) && !buttonElement.contains(event.target)) {
+        setIsSearchOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "relative flex items-center",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "mr-6 relative flex items-center",
+      ref: containerRef,
+      children: [!hideCtaButtons && !isSearchOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "gap-4 flex items-center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          variant: "secondary",
+          size: 32,
+          asChild: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: "/about#post",
+            children: "\u6295\u7A3F"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          variant: "primary",
+          size: 32,
+          asChild: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: subscribeUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "\u8A02\u95B1"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchInputSection, {
+        isSearchOpen: isSearchOpen,
+        mode: "popover",
+        tags: tags,
+        searchPlaceholder: searchPlaceholder
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "w-8 h-8 mr-4 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800",
+      "aria-label": "\u641C\u5C0B",
+      onClick: () => setIsSearchOpen(!isSearchOpen),
+      ref: buttonRef,
+      children: isSearchOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClearIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIcon, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      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",
+      "aria-label": "\u8A2D\u5B9A",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SettingsIcon, {})
+    })]
+  });
+}
+function BottomNavigation({
+  onHamburgerOverlayOpen,
+  menuItems
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HamburgerButton, {
+      onHamburgerOverlayOpen: onHamburgerOverlayOpen,
+      small: true
+    }), menuItems.reduce((acc, item, index) => {
+      return [...acc, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "flex items-center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          href: item.href,
+          className: "py-1 prose-p1 font-bold! h-6 flex items-center text-neutral-900 transition-colors hover:text-red-400",
+          children: item.label
+        })
+      }, item.label), ...(index < menuItems.length - 1 ? [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "h-4 mx-2 w-px bg-neutral-border"
+      }, `separator-${index}`)] : [])];
+    }, [])]
+  });
+}
+function HamburgerButton({
+  onHamburgerOverlayOpen,
+  small = false
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    className: (0, _cn.cn)('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', small ? 'w-6 h-6' : 'w-8 h-8'),
+    onClick: onHamburgerOverlayOpen,
+    children: small ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.HamburgerIconSmall, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.HamburgerIcon, {})
+  });
+}
+//# sourceMappingURL=shared-components.js.map