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

package/src/footer.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import Image from 'next/image'
+
+import Button from './components/button'
+import {
+  ADDITIONAL_MENU_ITEMS,
+  DONATE_URL,
+  PRIVACY_POLICY,
+  SOCIAL_MEDIA_ITEMS,
+} from './constants/default-values'
+import { MenuItem, SocialMediaHrefs } from './types'
+import { generateSocialMediaConfig } from './utils/generate-social-media-config'
+
+type FooterProps = {
+  socialMediaHrefs?: SocialMediaHrefs
+  additionalMenuItems?: MenuItem[]
+  donateUrl?: string
+  privacyPolicyUrl?: string
+}
+
+const Footer = ({
+  socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),
+  additionalMenuItems = ADDITIONAL_MENU_ITEMS,
+  donateUrl = DONATE_URL,
+  privacyPolicyUrl = PRIVACY_POLICY,
+}: FooterProps) => {
+  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)
+
+  return (
+    <footer className="w-full bg-neutral-white">
+      {/* Main Footer Content */}
+      <div className="py-12 desktop:py-14 w-full bg-neutral-white px-(--margin-mobile) desktop:px-(--margin-desktop)">
+        <div className="max-w-300 mx-auto">
+          <div className="gap-8 flex flex-col items-center desktop:flex-row desktop:justify-between">
+            {/* Logo and Description */}
+            <div className="max-w-100 gap-6 flex w-full flex-col items-center desktop:items-start">
+              <div className="flex items-center">
+                <a href="/" className="flex items-center">
+                  <Image
+                    src="/assets/images/footer-logo.svg"
+                    alt="少年報導者"
+                    loading="lazy"
+                    width={238}
+                    height={26}
+                  />
+                </a>
+              </div>
+              <p className="prose-p2 w-full text-neutral-900">
+                《少年報導者》是由非營利媒體《報導者》針對兒少打造的深度新聞報導品牌，與兒童和少年一起理解世界，參與未來。
+              </p>
+              <Button size={44} variant="secondary" asChild className="w-75">
+                <a href={donateUrl} target="_blank" rel="noreferrer">
+                  贊助我們
+                </a>
+              </Button>
+            </div>
+
+            <div className="gap-6 flex flex-row">
+              <div className="gap-2 flex flex-col">
+                {additionalMenuItems.slice(0, 4).map((link) => (
+                  <a
+                    key={link.label}
+                    href={link.href}
+                    className="prose-p2-bold min-w-30 text-neutral-900 transition-colors duration-200 hover:text-red-400"
+                    target={link.external ? '_blank' : undefined}
+                    rel={link.external ? 'noopener noreferrer' : undefined}
+                  >
+                    {link.label}
+                  </a>
+                ))}
+              </div>
+              <div className="gap-2 flex flex-col">
+                {additionalMenuItems.slice(4).map((link) => (
+                  <a
+                    key={link.label}
+                    href={link.href}
+                    className="prose-p2-bold min-w-30 text-neutral-900 transition-colors duration-200 hover:text-red-400"
+                    target={link.external ? '_blank' : undefined}
+                    rel={link.external ? 'noopener noreferrer' : undefined}
+                  >
+                    {link.label}
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="py-6 w-full bg-red-400 px-(--margin-mobile) desktop:px-(--margin-desktop)">
+        <div className="max-w-300 mx-auto">
+          <div className="gap-5 desktop:gap-4 flex flex-col items-center desktop:flex-row desktop:justify-between">
+            <div className="gap-4 order-1 flex items-center desktop:order-2">
+              {socialMediaConfig.map((social) => {
+                const IconComponent = social.icon
+                return (
+                  <a
+                    key={social.label}
+                    href={social.href}
+                    className="relative text-neutral-white transition-colors duration-200 hover:text-neutral-200"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={social.label}
+                  >
+                    <div className="peer w-6 h-6 relative z-10 flex items-center justify-center rounded-full text-neutral-white transition-all duration-200 hover:text-red-500">
+                      {IconComponent && <IconComponent />}
+                    </div>
+                    <div className="p-2 peer-hover:bg-white absolute top-1/2 left-1/2 z-1 flex h-[23px] w-[23px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-all duration-200"></div>
+                  </a>
+                )
+              })}
+            </div>
+
+            <div className="prose-p3 text-center text-neutral-white desktop:order-1 desktop:text-left">
+              <p className="desktop:inline">
+                衛部救字第1131363879號｜勸募期間 2025/1/1~12/31
+                <span className="hidden desktop:inline">｜</span>
+              </p>
+              <p className="desktop:inline">
+                <a
+                  href={privacyPolicyUrl}
+                  target="_blank"
+                  className="desktop:ml-1 text-neutral-white underline"
+                  rel="noopener noreferrer"
+                >
+                  隱私政策
+                </a>
+                ｜
+                <a
+                  href="https://www.twreporter.org/a/license-footer"
+                  target="_blank"
+                  className="desktop:ml-1 text-neutral-white underline"
+                  rel="noopener noreferrer"
+                >
+                  許可協議
+                </a>
+              </p>
+              <p className="hidden desktop:inline">｜</p>
+              <p className="desktop:inline">
+                Copyright © {new Date().getFullYear()} The Reporter
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

package/src/header/desktop-header.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { LoginIcon } from '../icons'
+import type { MenuItem } from '../types'
+import { cn } from '../utils/cn'
+import {
+  ActionButtons,
+  BottomNavigation,
+  HamburgerButton,
+  LogoLink,
+} from './shared-components'
+
+type DesktopHeaderProps = {
+  onHamburgerOverlayOpen: () => void
+  keywords: string[]
+  compactMode: boolean
+  postTitle?: string
+  hide: boolean
+  searchPlaceholder: string
+  subscribeUrl: string
+  menuItems: MenuItem[]
+}
+
+export function DesktopHeader({
+  onHamburgerOverlayOpen,
+  keywords,
+  compactMode,
+  postTitle,
+  hide,
+  searchPlaceholder,
+  subscribeUrl,
+  menuItems,
+}: DesktopHeaderProps) {
+  return (
+    <>
+      <div className="hidden h-(--desktop-header-height) desktop:block"></div>
+      <div
+        className={cn(
+          'top-0 ease-in-out fixed left-1/2 z-1000 hidden w-full -translate-x-1/2 transform transition-all duration-500 desktop:block',
+          compactMode && 'bg-white',
+          hide
+            ? 'pointer-events-none -translate-y-full opacity-0'
+            : 'translate-y-0 pointer-events-auto opacity-100'
+        )}
+      >
+        <div className="px-12 hidden w-full bg-transparent desktop:block">
+          <div className="max-w-300 mx-auto">
+            <div
+              className={cn(
+                'px-4 flex items-center justify-between py-[18px]',
+                compactMode && 'py-2.5'
+              )}
+            >
+              <div className={'flex items-center'}>
+                <div
+                  className={cn(
+                    'ease-in-out overflow-hidden transition-all duration-500',
+                    compactMode
+                      ? 'translate-x-0 max-w-12 mr-4 w-auto scale-100 opacity-100'
+                      : '-translate-x-2 w-0 max-w-0 pointer-events-none scale-95 opacity-0'
+                  )}
+                >
+                  <HamburgerButton
+                    onHamburgerOverlayOpen={onHamburgerOverlayOpen}
+                    small
+                  />
+                </div>
+                <div className={compactMode ? 'mr-12' : 'mr-8'}>
+                  <LogoLink compactMode={compactMode} />
+                </div>
+                {postTitle && (
+                  <div className="pr-12 block">
+                    <p className="prose-p2 font-medium tracking-wide max-w-124 overflow-hidden text-ellipsis whitespace-nowrap text-neutral-900">
+                      {postTitle}
+                    </p>
+                  </div>
+                )}
+                <div
+                  className={cn(
+                    'ease-in-out overflow-hidden transition-all duration-500',
+                    compactMode
+                      ? 'max-h-0 -translate-x-8 scale-95 opacity-0'
+                      : 'max-h-20 max-w-auto scale-100 opacity-100',
+                    postTitle && compactMode && 'max-w-0'
+                  )}
+                >
+                  <span className="prose-p2 font-medium translate-y-0 inline-block tracking-[2.2px]! text-nowrap text-neutral-900 opacity-100">
+                    理解世界 × 參與未來
+                  </span>
+                </div>
+              </div>
+
+              <div className="gap-4 flex items-center">
+                <ActionButtons
+                  tags={keywords}
+                  hideCtaButtons={compactMode}
+                  searchPlaceholder={searchPlaceholder}
+                  subscribeUrl={subscribeUrl}
+                />
+                <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>
+              </div>
+            </div>
+
+            <div
+              className={cn(
+                'ease-in-out overflow-hidden transition-all duration-500',
+                compactMode
+                  ? 'h-0 -translate-y-4 opacity-0'
+                  : 'translate-y-0 h-auto opacity-100'
+              )}
+            >
+              <BottomNavigation
+                onHamburgerOverlayOpen={onHamburgerOverlayOpen}
+                menuItems={menuItems}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/header/header-context.tsx

@@ -0,0 +1,56 @@
+'use client'
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+
+type HeaderContextType = {
+  postTitle?: string
+  setPostTitle: (title?: string) => void
+  isMenuOpen: boolean
+  openMenu: () => void
+  closeMenu: () => void
+  keywords: string[]
+}
+
+const HeaderContext = createContext<HeaderContextType | undefined>(undefined)
+
+export function HeaderProvider({
+  children,
+  keywords,
+}: {
+  children: ReactNode
+  keywords: string[]
+}) {
+  const [postTitle, setPostTitle] = useState<string | undefined>(undefined)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const openMenu = useCallback(() => setIsMenuOpen(true), [])
+  const closeMenu = useCallback(() => setIsMenuOpen(false), [])
+
+  const contextValue = useMemo(
+    () => ({
+      postTitle,
+      setPostTitle,
+      isMenuOpen,
+      openMenu,
+      closeMenu,
+      keywords,
+    }),
+    [postTitle, setPostTitle, isMenuOpen, openMenu, closeMenu, keywords]
+  )
+
+  return (
+    <HeaderContext.Provider value={contextValue}>
+      {children}
+    </HeaderContext.Provider>
+  )
+}
+
+export function useHeaderContext() {
+  const context = useContext(HeaderContext)
+  return context
+}

package/src/header/index.tsx

@@ -0,0 +1,96 @@
+'use client'
+import {
+  ADDITIONAL_MENU_ITEMS,
+  DONATE_URL,
+  MENU_ITEMS,
+  SEARCH_PLACEHOLDER,
+  SOCIAL_MEDIA_ITEMS,
+  SUBSCRIBE_URL,
+} from '../constants/default-values'
+import {
+  ScrollLevel,
+  useIsAtTop,
+  useMediaQuery,
+  useScrollLevel,
+} from '../hooks'
+import type { MenuItem, SocialMediaHrefs } from '../types'
+import { DesktopHeader } from './desktop-header'
+import { useHeaderContext } from './header-context'
+import Menu from './menu'
+import { MobileHeader } from './mobile-header'
+
+type HeaderProps = {
+  menuItems?: MenuItem[]
+  additionalMenuItems?: MenuItem[]
+  socialMediaHrefs?: SocialMediaHrefs
+  searchPlaceholder?: string
+  subscribeUrl?: string
+  donateUrl?: string
+}
+
+function Header({
+  menuItems = MENU_ITEMS,
+  additionalMenuItems = ADDITIONAL_MENU_ITEMS,
+  socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),
+  searchPlaceholder = SEARCH_PLACEHOLDER,
+  subscribeUrl = SUBSCRIBE_URL,
+  donateUrl = DONATE_URL,
+}: HeaderProps) {
+  const context = useHeaderContext()
+  const postTitle = context?.postTitle
+  const isMenuOpen = context?.isMenuOpen || false
+  const openMenu = context?.openMenu
+  const closeMenu = context?.closeMenu
+  const keywords = context?.keywords || []
+  const onHamburgerOverlayOpen = () => {
+    openMenu?.()
+  }
+
+  const onCloseMenu = () => {
+    closeMenu?.()
+  }
+
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  const isAtTop = useIsAtTop()
+  const scrollingLevel = useScrollLevel({
+    scrollDownDistance: 150,
+    throttleThreshold: 50,
+  })
+
+  const isScrollingDown = scrollingLevel === ScrollLevel.DOWN_HIDDEN
+
+  return (
+    <>
+      <DesktopHeader
+        onHamburgerOverlayOpen={onHamburgerOverlayOpen}
+        keywords={keywords}
+        hide={isScrollingDown}
+        compactMode={!isAtTop}
+        postTitle={isAtTop ? undefined : postTitle}
+        searchPlaceholder={searchPlaceholder}
+        subscribeUrl={subscribeUrl}
+        menuItems={menuItems}
+      />
+      <MobileHeader
+        onCloseMenu={onCloseMenu}
+        showCloseButtonWhenMenuOpen={isMobile}
+        onHamburgerOverlayOpen={onHamburgerOverlayOpen}
+        isMenuOpen={isMenuOpen}
+      />
+      <Menu
+        isOpen={isMenuOpen}
+        onClose={closeMenu || (() => undefined)}
+        keywords={keywords}
+        menuItems={menuItems}
+        additionalMenuItems={additionalMenuItems}
+        socialMediaHrefs={socialMediaHrefs}
+        donateUrl={donateUrl}
+        subscribeUrl={subscribeUrl}
+        searchPlaceholder={searchPlaceholder}
+      />
+    </>
+  )
+}
+
+export default Header

package/src/header/menu/header-menu-item-group.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+
+import { MenuItem } from '../../types'
+import HeaderMenuItem from './header-menu-item'
+
+function MenuItemGroup({
+  isMenuOpen,
+  menuItems,
+}: {
+  isMenuOpen: boolean
+  menuItems: MenuItem[]
+}) {
+  const [currentExpandedItem, setCurrentExpandedItem] = useState<string | null>(
+    null
+  )
+
+  const handleClick = (label: string | null) => {
+    setCurrentExpandedItem(label)
+  }
+
+  useEffect(() => {
+    if (!isMenuOpen) {
+      setCurrentExpandedItem(null)
+    }
+  }, [isMenuOpen])
+
+  return menuItems.map((item) => (
+    <HeaderMenuItem
+      key={item.label}
+      {...item}
+      isExpanded={currentExpandedItem === item.label}
+      onExpand={handleClick}
+    />
+  ))
+}
+
+export default MenuItemGroup

package/src/header/menu/header-menu-item.tsx

@@ -0,0 +1,132 @@
+import { MenuItem } from '../../types'
+import { cn } from '../../utils/cn'
+import { useHeaderContext } from '../header-context'
+
+type HeaderMenuItemProps = {
+  contentClassName?: string
+  isExpanded?: boolean
+  onExpand?: (label: string | null) => void
+} & MenuItem
+
+function HeaderMenuItem({
+  label,
+  href,
+  subItems,
+  external,
+  showIcon,
+  icon,
+  isExpanded,
+  contentClassName,
+  onExpand,
+}: HeaderMenuItemProps) {
+  const hasSubItems = subItems && subItems.length > 0
+  const context = useHeaderContext()
+  const closeMenu = context?.closeMenu
+
+  const handleExpand = () => {
+    if (hasSubItems) {
+      onExpand?.(isExpanded ? null : label)
+    }
+  }
+
+  const content = (
+    <div
+      className={cn(
+        'group flex w-full items-center justify-between text-neutral-900 transition-colors duration-100 group-hover:text-neutral-900',
+        contentClassName
+      )}
+    >
+      <div className="gap-2 flex items-center">
+        {showIcon && icon && (
+          <div className="w-4 h-4 flex items-center justify-center">{icon}</div>
+        )}
+        <span
+          className={cn(
+            'prose-p1-bold',
+            isExpanded && 'text-red-400 group-hover:text-red-400'
+          )}
+        >
+          {label}
+        </span>
+      </div>
+
+      {hasSubItems && (
+        <div
+          className={cn(
+            'w-6 h-6 flex items-center justify-center transition-transform',
+            isExpanded && 'rotate-180 text-red-400 group-hover:text-red-400'
+          )}
+        >
+          <svg width="14" height="7" viewBox="0 0 14 7" fill="none">
+            <path
+              d="M1 1L7 6L13 1"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+      )}
+    </div>
+  )
+
+  if (hasSubItems) {
+    return (
+      <div className="w-full">
+        <button
+          onClick={handleExpand}
+          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"
+        >
+          {content}
+        </button>
+        <div
+          className={cn(
+            'ease-in-out overflow-hidden transition-all duration-300',
+            isExpanded ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+          )}
+        >
+          {subItems.map((subItem, index) => (
+            <a
+              key={index}
+              href={subItem.href}
+              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"
+              onClick={closeMenu}
+            >
+              {subItem.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (external) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={
+          'px-6 tablet:px-8 py-2 block transition-colors duration-200 hover:bg-neutral-black/5 active:bg-neutral-black/10'
+        }
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <a
+      href={href}
+      className={
+        'px-6 tablet:px-8 py-2 block transition-colors duration-200 hover:bg-neutral-black/5 active:bg-neutral-black/10'
+      }
+      onClick={closeMenu}
+    >
+      {content}
+    </a>
+  )
+}
+
+export default HeaderMenuItem