---
import astroLogoLight from "@assets/标题-浅色.svg";
import astroLogoDark from "@assets/标题-深色.svg";
import DarkModeImage from "@components/DarkModeImage.svelte";
import SearchBox from "@components/SearchBox.svelte";
---

<div class="hidden md:flex relative top-0 left-0 w-full h-28 z-20 justify-between">
	<div class="w-[305px] xl:ml-8 inline-flex items-center">
		<a href="/">
			<DarkModeImage
				lightSrc={astroLogoLight.src}
				darkSrc={astroLogoDark.src}
				alt="Logo"
				className="w-[305px] h-24 inline-block max-w-[15rem] lg:max-w-[305px]"
				client:load
			/>
		</a>
	</div>
	<SearchBox client:load/>

	<div class="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="/register">注册</a>
		<a href="/about">关于</a>
	</div>
</div>