Initial commit from Create vite

src/home/header.tsx

@@ -0,0 +1,91 @@
+import { useSyncExternalStore } from "react"
+import { NavLink } from "react-router-dom"
+import Wrap from "@/components/wrap"
+import { cn } from "@/lib/utils"
+
+export default function Header() {
+  const scroll = useSyncExternalStore(
+    callback => {
+      window.addEventListener("scroll", callback)
+      return () => {
+        window.removeEventListener("scroll", callback)
+      }
+    },
+    () => window.scrollY > 48,
+    () => false,
+  )
+
+  return (
+    <header className={cn("fixed top-0 left-0 w-screen z-10 flex flex-col ")}>
+      <div
+        className={cn(
+          `flex-none pointer-events-auto`,
+          `transition-[background,shadow] duration-200 ease-in-out`,
+          scroll
+            ? `bg-[#fffe] backdrop-blur-sm shadow-lg`
+            : `bg-transparent shadow-none`,
+        )}
+      >
+        <Wrap className="h-20 max-md:h-16 flex justify-between pl-15 pr-15">
+          <nav className="flex items-center justify-between gap-4 lg:gap-8">
+            <ul className="h-full items-stretch hidden lg:flex">
+              <NavItem to="/">首页</NavItem>
+              <NavItem to="/product">产品购买</NavItem>
+              <NavItem to="/ipline">IP线路表</NavItem>
+              <NavItem to="/softDownload">软件下载</NavItem>
+              <NavItem to="/help">帮助/教程</NavItem>
+              <NavItem to="/client">下载客户端</NavItem>
+            </ul>
+          </nav>
+          <ProfileOrLogin />
+        </Wrap>
+      </div>
+    </header>
+  )
+}
+
+const NavItem = ({
+  to,
+  children,
+}: {
+  to: string
+  children: React.ReactNode
+}) => (
+  <NavLink
+    to={to}
+    className={({ isActive }) =>
+      `h-full flex items-center relative px-3 ${
+        isActive
+          ? "text-blue-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-blue-500"
+          : "text-slate-700"
+      }`
+    }
+  >
+    {children}
+  </NavLink>
+)
+
+function ProfileOrLogin() {
+  return (
+    <div className="flex items-center">
+      <NavLink
+        to="/login"
+        state={{ tab: "login" }}
+        className="w-24 h-12 flex items-center justify-center lg:text-lg"
+      >
+        <span>登录</span>
+      </NavLink>
+      <NavLink
+        to="/login"
+        state={{ tab: "register" }}
+        className={[
+          `w-20 lg:w-24 h-10 lg:h-12 bg-linear-to-r rounded-full flex items-center justify-center lg:text-lg text-white`,
+          `transition-colors duration-200 ease-in-out`,
+          `from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
+        ].join(" ")}
+      >
+        <span>注册</span>
+      </NavLink>
+    </div>
+  )
+}