---
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:block relative top-0 left-0 w-full h-28 bg-white/80 dark:bg-zinc-900/70 backdrop-blur-lg z-50">
	<div class="w-[305px] ml-8 inline-flex h-full items-center">
		<a href="/">
			<DarkModeImage
					lightSrc={astroLogoLight.src}
					darkSrc={astroLogoDark.src}
					alt="Logo"
					className="w-[305px] h-24 inline-block"
					client:load
			/>
		</a>
	</div>
	<SearchBox client:load/>

	<div class="inline-flex right-12 absolute gap-4 h-full
				text-xl font-medium items-center w-48 justify-end">
		<a href="/about">关于</a>
	</div>
</div>