125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import TitleLight from "@/public/icons/标题-浅色.svg";
|
|
import TitleDark from "@/public/icons/标题-深色.svg";
|
|
import LogoMobileLight from "@/public/icons/TitleBar Mobile Light.svg";
|
|
import LogoMobileDark from "@/public/icons/TitleBar Mobile Dark.svg";
|
|
import DarkModeImage from "@/components/utils/DarkModeImage";
|
|
import React, { useState } from "react";
|
|
import { NavigationDrawer } from "@/components/shell/NavigatinDrawer";
|
|
import { Portal } from "@/components/utils/Portal";
|
|
import { RegisterIcon } from "@/components/icons/RegisterIcon";
|
|
import { SearchBox } from "@/components/ui/SearchBox";
|
|
import { MenuIcon } from "@/components/icons/MenuIcon";
|
|
import { SearchIcon } from "@/components/icons/SearchIcon";
|
|
import { InfoIcon } from "../icons/InfoIcon";
|
|
import { HomeIcon } from "../icons/HomeIcon";
|
|
|
|
export const HeaderDestop = () => {
|
|
return (
|
|
<div className="hidden md:flex relative top-0 left-0 w-full h-28 z-20 justify-between">
|
|
<div className="w-[305px] xl:ml-8 inline-flex items-center">
|
|
<a href="/">
|
|
<DarkModeImage
|
|
lightSrc={TitleLight}
|
|
darkSrc={TitleDark}
|
|
alt="logo"
|
|
className="w-[305px] h-24 inline-block max-w-[15rem] lg:max-w-[305px]"
|
|
/>
|
|
</a>
|
|
</div>
|
|
|
|
<SearchBox />
|
|
|
|
<div
|
|
className="inline-flex relative gap-6 h-full lg:right-12
|
|
text-xl font-medium items-center w-[15rem] min-w-[8rem] mr-4 lg:mr-0 lg:w-[305px] justify-end"
|
|
>
|
|
<a href="/signup">注册</a>
|
|
<a href="/about">关于</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const HeaderMobile = () => {
|
|
const [showDrawer, setShowDrawer] = useState(false);
|
|
const [showsearchBox, setShowsearchBox] = useState(false);
|
|
return (
|
|
<>
|
|
<Portal>
|
|
<NavigationDrawer show={showDrawer} onClose={() => setShowDrawer(false)}>
|
|
<div className="flex flex-col w-full">
|
|
<div className="w-full h-14 flex items-center px-4 mt-1 pl-5">
|
|
<DarkModeImage
|
|
lightSrc={LogoMobileLight}
|
|
darkSrc={LogoMobileDark}
|
|
alt="Logo"
|
|
className="w-24 h-8"
|
|
/>
|
|
</div>
|
|
<div className="w-full h-14 flex items-center px-4">
|
|
<a href="/" className="flex">
|
|
<HomeIcon className="text-2xl pr-4" />
|
|
<span>首页</span>
|
|
</a>
|
|
</div>
|
|
<div className="w-full h-14 flex items-center px-4">
|
|
<a href="/about" className="flex">
|
|
<InfoIcon className="text-2xl pr-4" />
|
|
<span>关于</span>
|
|
</a>
|
|
</div>
|
|
<div className="w-full h-14 flex items-center px-4">
|
|
<a href="/signup" className="flex">
|
|
<RegisterIcon className="text-2xl pr-4" />
|
|
<span>注册</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</NavigationDrawer>
|
|
</Portal>
|
|
<div className="md:hidden relative top-0 left-0 w-full h-16 z-20">
|
|
{!showsearchBox && (
|
|
<button
|
|
className="inline-flex absolute left-0 ml-4 h-full items-center dark:text-white text-2xl"
|
|
onClick={() => setShowDrawer(true)}
|
|
>
|
|
<MenuIcon />
|
|
</button>
|
|
)}
|
|
{!showsearchBox && (
|
|
<div className="absolute left-1/2 -translate-x-1/2 -translate-y-0.5 inline-flex h-full items-center">
|
|
<a href="/">
|
|
<DarkModeImage
|
|
lightSrc={LogoMobileLight}
|
|
darkSrc={LogoMobileDark}
|
|
alt="Logo"
|
|
className="w-24 h-8 translate-y-[2px]"
|
|
/>
|
|
</a>
|
|
</div>
|
|
)}
|
|
{showsearchBox && <SearchBox close={() => setShowsearchBox(false)} />}
|
|
{!showsearchBox && (
|
|
<button
|
|
className="inline-flex absolute right-0 h-full items-center mr-4"
|
|
onClick={() => setShowsearchBox(!showsearchBox)}
|
|
>
|
|
<SearchIcon className="text-[1.625rem]" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Header = () => {
|
|
return (
|
|
<>
|
|
<HeaderDestop />
|
|
<HeaderMobile />
|
|
</>
|
|
);
|
|
};
|