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

package/src/header/menu/index.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import Image from 'next/image'
+import { useEffect } from 'react'
+
+import Button from '../../components/button'
+import { ClearIcon } from '../../icons'
+import type { MenuItem, SocialMediaHrefs } from '../../types'
+import { cn } from '../../utils/cn'
+import { generateSocialMediaConfig } from '../../utils/generate-social-media-config'
+import { SearchInputSection } from '../shared-components'
+import HeaderMenuItem from './header-menu-item'
+import HeaderMenuItemGroup from './header-menu-item-group'
+
+type MenuProps = {
+  isOpen: boolean
+  onClose: () => void
+  keywords: string[]
+  menuItems: MenuItem[]
+  additionalMenuItems: MenuItem[]
+  socialMediaHrefs: SocialMediaHrefs
+  donateUrl: string
+  subscribeUrl: string
+  searchPlaceholder: string
+}
+
+function Divider() {
+  return (
+    <div className="px-6 tablet:px-8 py-4 w-full">
+      <div className="h-px w-full bg-neutral-300"></div>
+    </div>
+  )
+}
+
+function Menu({
+  isOpen,
+  onClose,
+  keywords,
+  menuItems,
+  additionalMenuItems,
+  socialMediaHrefs,
+  donateUrl,
+  subscribeUrl,
+  searchPlaceholder,
+}: MenuProps) {
+  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.classList.add('no-scroll')
+    } else {
+      document.body.classList.remove('no-scroll')
+    }
+
+    return () => {
+      document.body.classList.remove('no-scroll')
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [isOpen, onClose])
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className={cn(
+          'inset-0 fixed z-1001 bg-neutral-500/50 transition-opacity duration-300',
+          isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'
+        )}
+        onClick={onClose}
+      />
+
+      {/* Menu */}
+      <div
+        className={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'
+        )}
+      >
+        <div className="flex h-full flex-col overflow-y-auto">
+          <div className="px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex">
+            <div className="flex items-center">
+              <a href="/">
+                <Image
+                  src="/assets/images/brand-icon.svg"
+                  alt="少年報導者 The Reporter for Kids"
+                  className="h-5"
+                  height={20}
+                  width={183}
+                  loading="eager"
+                />
+              </a>
+            </div>
+            <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="關閉選單"
+            >
+              <ClearIcon />
+            </button>
+          </div>
+
+          <div className="px-6 tablet:px-8 pt-4 desktop:hidden">
+            <SearchInputSection
+              mode="inline"
+              tags={keywords}
+              searchPlaceholder={searchPlaceholder}
+            />
+          </div>
+
+          <div className="py-4 flex-1">
+            <HeaderMenuItem {...menuItems?.[0]} />
+
+            <Divider />
+
+            {/* Categories */}
+            <div className="py-2">
+              <HeaderMenuItemGroup isMenuOpen={isOpen} menuItems={menuItems} />
+            </div>
+
+            <Divider />
+
+            {/* Reading Settings */}
+            <HeaderMenuItem
+              {...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"
+            />
+
+            <Divider />
+
+            {/* About Us Section */}
+            <div className="py-2">
+              {additionalMenuItems.slice(1).map((item, index) => (
+                <HeaderMenuItem
+                  key={index}
+                  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"
+                />
+              ))}
+            </div>
+
+            <Divider />
+
+            {/* Social Media */}
+            <div className="px-6 tablet:px-8">
+              <div className="gap-4 tablet:gap-0 px-4 flex items-center justify-center tablet:justify-between">
+                {socialMediaConfig.map((item) => (
+                  <a
+                    key={item.label}
+                    href={item.href}
+                    className="text-neutral-900 transition-colors duration-200 hover:text-red-500"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={item.label}
+                  >
+                    <div className="w-6 h-6 flex items-center justify-center">
+                      {item.icon && <item.icon />}
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="px-6 tablet:px-8 py-6 tablet:pt-6 tablet:pb-8">
+            <div className="gap-4 flex flex-col">
+              <Button variant="secondary" size={44} asChild className="w-full">
+                <a
+                  href={subscribeUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  訂閱電子報
+                </a>
+              </Button>
+              <Button variant="primary" size={44} asChild className="w-full">
+                <a href={donateUrl} target="_blank" rel="noopener noreferrer">
+                  贊助我們
+                </a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Menu

package/src/header/mobile-header.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { ClearIcon, LoginIcon } from '../icons'
+import { cn } from '../utils/cn'
+import { HamburgerButton, LogoLink } from './shared-components'
+
+type MobileHeaderProps = {
+  onHamburgerOverlayOpen: () => void
+  onCloseMenu: () => void
+  showCloseButtonWhenMenuOpen: boolean
+  isMenuOpen: boolean
+}
+
+export function MobileHeader({
+  onHamburgerOverlayOpen,
+  onCloseMenu,
+  showCloseButtonWhenMenuOpen,
+  isMenuOpen,
+}: MobileHeaderProps) {
+  const showCloseButton = showCloseButtonWhenMenuOpen && isMenuOpen
+
+  return (
+    <>
+      <div className="h-(--mobile-header-height) desktop:hidden"></div>
+      <div
+        className={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'
+        )}
+      >
+        <div className="py-4 flex items-center justify-between">
+          <LogoLink />
+
+          <div className="gap-4 flex items-center">
+            {!showCloseButton && (
+              <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="登入"
+              >
+                <LoginIcon />
+              </a>
+            )}
+            {showCloseButton ? (
+              <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="關閉選單"
+              >
+                <ClearIcon />
+              </button>
+            ) : (
+              <HamburgerButton
+                onHamburgerOverlayOpen={onHamburgerOverlayOpen}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/header/post-title-setter.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { useHeaderContext } from './header-context'
+
+type PostTitleSetterProps = {
+  postTitle?: string
+}
+
+function PostTitleSetter({ postTitle }: PostTitleSetterProps) {
+  const context = useHeaderContext()
+  const setPostTitle = context?.setPostTitle
+  useEffect(() => {
+    setPostTitle?.(postTitle)
+    return () => setPostTitle?.(undefined)
+  }, [postTitle, setPostTitle])
+
+  return null
+}
+
+export default PostTitleSetter

package/src/header/shared-components.tsx

@@ -0,0 +1,326 @@
+'use client'
+import { cva } from 'class-variance-authority'
+import Image from 'next/image'
+import { useEffect, useRef, useState } from 'react'
+
+import { Button, Input } from '../components'
+import {
+  ClearIcon,
+  HamburgerIcon,
+  HamburgerIconSmall,
+  SearchIcon,
+  SettingsIcon,
+} from '../icons'
+import type { MenuItem } from '../types'
+import { cn } from '../utils/cn'
+
+const searchFormVariants = 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 = 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',
+      },
+    ],
+  }
+)
+
+export function LogoLink({ compactMode = false }: { compactMode?: boolean }) {
+  return (
+    <a href="/" className="flex items-center" rel="home">
+      <Image
+        src="/assets/images/brand-icon.svg"
+        alt="少年報導者 The Reporter for Kids"
+        loading="eager"
+        className={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}
+      />
+    </a>
+  )
+}
+
+type SearchInputSectionProps =
+  | {
+      mode: 'popover'
+      isSearchOpen: boolean
+      tags: string[]
+      searchPlaceholder: string
+    }
+  | {
+      mode: 'inline'
+      tags: string[]
+      searchPlaceholder: string
+    }
+
+export function SearchInputSection(props: SearchInputSectionProps) {
+  const ref = useRef<HTMLInputElement>(null)
+  const [isFocused, setIsFocused] = useState(false)
+  const [searchValue, setSearchValue] = useState('')
+
+  const mode = props.mode
+  const isSearchOpen = mode === 'popover' && props.isSearchOpen
+  const tags = props.tags
+  const searchPlaceholder = props.searchPlaceholder
+
+  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 (
+    <div
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      className={mode === 'inline' ? 'relative w-full' : 'h-11'}
+    >
+      <form
+        role="search"
+        method="get"
+        action="/search"
+        className={searchFormVariants({
+          mode,
+          isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,
+        })}
+      >
+        <Input
+          placeholder={searchPlaceholder}
+          name="q"
+          title="Search for..."
+          aria-label="Search for..."
+          className="w-[99%]"
+          inputRef={ref}
+          onChange={setSearchValue}
+          value={searchValue}
+        />
+      </form>
+      <div
+        className={searchDropdownVariants({
+          mode,
+          isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,
+          isFocused,
+        })}
+      >
+        <h3 className="prose-p3 font-bold mb-3 text-neutral-700">熱門搜尋</h3>
+        <div className="gap-2.5 flex flex-wrap">
+          {tags.map((keyword) => (
+            <a
+              key={keyword}
+              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)}`}
+            >
+              #{keyword}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function ActionButtons({
+  hideCtaButtons = false,
+  tags,
+  searchPlaceholder,
+  subscribeUrl,
+}: {
+  hideCtaButtons?: boolean
+  tags: string[]
+  searchPlaceholder: string
+  subscribeUrl: string
+}) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const containerElement = containerRef.current
+      const buttonElement = buttonRef.current
+      if (!containerElement || !buttonElement) return
+      if (
+        !containerElement.contains(event.target as Node) &&
+        !buttonElement.contains(event.target as Node)
+      ) {
+        setIsSearchOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <div className="relative flex items-center">
+      <div className="mr-6 relative flex items-center" ref={containerRef}>
+        {/* CTA Buttons - Base layer */}
+        {!hideCtaButtons && !isSearchOpen && (
+          <div className="gap-4 flex items-center">
+            <Button variant="secondary" size={32} asChild>
+              <a href="/about#post">投稿</a>
+            </Button>
+            <Button variant="primary" size={32} asChild>
+              <a href={subscribeUrl} target="_blank" rel="noopener noreferrer">
+                訂閱
+              </a>
+            </Button>
+          </div>
+        )}
+
+        <SearchInputSection
+          isSearchOpen={isSearchOpen}
+          mode="popover"
+          tags={tags}
+          searchPlaceholder={searchPlaceholder}
+        />
+      </div>
+
+      <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="搜尋"
+        onClick={() => setIsSearchOpen(!isSearchOpen)}
+        ref={buttonRef}
+      >
+        {isSearchOpen ? <ClearIcon /> : <SearchIcon />}
+      </button>
+      <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="設定"
+      >
+        <SettingsIcon />
+      </button>
+    </div>
+  )
+}
+
+export function BottomNavigation({
+  onHamburgerOverlayOpen,
+  menuItems,
+}: {
+  onHamburgerOverlayOpen: () => void
+  menuItems: MenuItem[]
+}) {
+  return (
+    <div className="py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border">
+      <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />
+
+      {menuItems.reduce((acc, item, index) => {
+        return [
+          ...acc,
+          <div key={item.label} className="flex items-center">
+            <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"
+            >
+              {item.label}
+            </a>
+          </div>,
+          ...(index < menuItems.length - 1
+            ? [
+                <div
+                  key={`separator-${index}`}
+                  className="h-4 mx-2 w-px bg-neutral-border"
+                />,
+              ]
+            : []),
+        ]
+      }, [] as React.ReactNode[])}
+    </div>
+  )
+}
+
+export function HamburgerButton({
+  onHamburgerOverlayOpen,
+  small = false,
+}: {
+  onHamburgerOverlayOpen: () => void
+  small?: boolean
+}) {
+  return (
+    <button
+      className={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}
+    >
+      {small ? <HamburgerIconSmall /> : <HamburgerIcon />}
+    </button>
+  )
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { default as useIsAtTop } from './use-is-at-top'
+export { default as useMediaQuery } from './use-media-query'
+export { ScrollLevel, default as useScrollLevel } from './use-scroll-level'

package/src/hooks/use-is-at-top.ts

@@ -0,0 +1,23 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+const useIsAtTop = (threshold = 35) => {
+  const [isAtTop, setIsAtTop] = useState(true)
+
+  useEffect(() => {
+    const checkIsAtTop = () => {
+      setIsAtTop(window.scrollY <= threshold)
+    }
+
+    checkIsAtTop()
+    window.addEventListener('scroll', checkIsAtTop, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', checkIsAtTop)
+    }
+  }, [threshold])
+
+  return isAtTop
+}
+
+export default useIsAtTop

package/src/hooks/use-media-query.ts

@@ -0,0 +1,57 @@
+'use client'
+import { useEffect, useLayoutEffect, useState } from 'react'
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+type UseMediaQueryOptions = {
+  defaultValue?: boolean
+  initializeWithValue?: boolean
+}
+
+const IS_SERVER = typeof window === 'undefined'
+
+function useMediaQuery(
+  query: string,
+  {
+    defaultValue = false,
+    initializeWithValue = true,
+  }: UseMediaQueryOptions = {}
+): boolean {
+  const getMatches = (query: string): boolean => {
+    if (IS_SERVER) {
+      return defaultValue
+    }
+    return window.matchMedia(query).matches
+  }
+
+  const [matches, setMatches] = useState<boolean>(() => {
+    if (initializeWithValue && !IS_SERVER) {
+      return getMatches(query)
+    }
+    return defaultValue
+  })
+
+  // Handles the change event of the media query.
+  function handleChange() {
+    setMatches(getMatches(query))
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query)
+
+    // Triggered at the first client-side load and if query changes
+    handleChange()
+
+    // Use modern addEventListener/removeEventListener
+    matchMedia.addEventListener('change', handleChange)
+
+    return () => {
+      matchMedia.removeEventListener('change', handleChange)
+    }
+  }, [query])
+
+  return matches
+}
+
+export default useMediaQuery