NotionNext/themes/starter/components/Logo.js

import { siteConfig } from '@/lib/config';
import { useGlobal } from '@/lib/global';
import throttle from 'lodash.throttle';
import Link from 'next/link'
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import CONFIG from '../config';

/**
 * 站点图标
 * @returns
 */
export const Logo = () => {
  const router = useRouter()
  const { isDarkMode } = useGlobal()
  const logoWhite = siteConfig('STARTER_LOGO_WHITE', null, CONFIG)
  const [logo, setLogo] = useState(logoWhite)
  const [logoTextColor, setLogoTextColor] = useState('text-white')

  useEffect(() => {
    navBarScrollListener()
    window.addEventListener('scroll', navBarScrollListener)
    return () => {
      window.removeEventListener('scroll', navBarScrollListener)
    }
  })

  // 滚动监听
  const throttleMs = 200
  const navBarScrollListener = throttle(() => {
    const scrollY = window.scrollY;
    // 何时显示浅色或白底的logo
    if (isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) {
      setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG))
      setLogoTextColor('text-white')
    } else {
      setLogo(siteConfig('STARTER_LOGO', null, CONFIG))
      setLogoTextColor('text-black')
    }
  }, throttleMs)

  return <>
    <div className="w-60 max-w-full px-4">
        <Link href="/" className="navbar-logo flex items-center w-full py-5">
        <>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        {logo && <img
            src={logo}
            alt="logo"
            className="header-logo w-full"
        />}
        {/* logo文字 */}
        <span className={`${logoTextColor} py-1.5 header-logo-text whitespace-nowrap text-2xl font-semibold`}>{siteConfig('TITLE')}</span>
        </>
        </Link>
    </div>
    </>
}