首页页面

src/app/(home)/header.tsx

@@ -0,0 +1,101 @@
+'use client'
+import {ReactNode, useEffect, useState} from 'react'
+import Link from 'next/link'
+import Wrap from '@/components/wrap'
+
+export type HeaderProps = {}
+
+export default function Header(props: HeaderProps) {
+  const [isScrolled, setIsScrolled] = useState(window.scrollY > 0)
+
+  const handleScroll = () => {
+    setIsScrolled(window.scrollY > 0)
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  return (
+    <header
+      className={[
+        `w-full h-24 fixed top-0 shadow-lg`,
+        `transition-shadow duration-200 ${isScrolled ? 'bg-white' : 'bg-transparent shadow-transparent'}`,
+      ].join(' ')}>
+      <Wrap className="flex items-center justify-between">
+        {/* 菜单 */}
+        <div className="flex items-center justify-between gap-8">
+          {/* logo */}
+          <Link href="/">
+            <img alt={`logo`} className={`w-16 h-16 rounded-full bg-gray-100`}/>
+          </Link>
+
+          {/* 菜单 */}
+          <nav className={`flex items-center`}>
+            <ul className="flex items-center gap-4 text-xl">
+              <NavItemTop>
+                <Link href={`/`}>首页</Link>
+              </NavItemTop>
+              <NavItemTop>
+                <button>产品订购</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <button>业务场景</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <button>帮助中心</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <Link href={`#`}>企业服务</Link>
+              </NavItemTop>
+              <NavItemTop>
+                <Link href={`#`}>推广返利</Link>
+              </NavItemTop>
+            </ul>
+          </nav>
+        </div>
+        {/* 登录 */}
+        <div className={`flex items-center`}>
+          <a
+            href="#"
+            className={`w-24 h-12 flex items-center justify-center text-xl font-medium`}>
+            <span>登录</span>
+          </a>
+          <a
+            href="#"
+            className={`w-24 h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center text-xl font-medium text-white`}>
+            <span>注册</span>
+          </a>
+        </div>
+      </Wrap>
+    </header>
+  )
+}
+
+type NavItemTopProps = {
+  children: ReactNode
+}
+
+function NavItemTop(props: NavItemTopProps) {
+  return (
+    <li className={`flex items-center text-xl px-2`}>
+      {props.children}
+    </li>
+  )
+}
+
+function SvgDown() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+        strokeLinejoin="round"/>
+    </svg>
+  )
+}