feat: update Header

Author: velut

src/components/Header.astro

@@ -1,21 +1,26 @@
 ---
-import ThemeButton from "./ThemeButton.svelte";
-import DonateButton from "./DonateButton.astro";
 import AboutButton from "./AboutButton.astro";
+import DonateButton from "./DonateButton.astro";
 import JsDocsIoButton from "./JsDocsIoButton.astro";
+import NpmPackageSearchButton from "./NpmPackageSearchButton.svelte";
+import ThemeButton from "./ThemeButton.svelte";
 ---
 
 <header class="border-b">
-	<div class="flex items-center justify-between gap-2 p-4">
+	<div class="flex items-center justify-between gap-4 p-4">
 		<JsDocsIoButton />
 
 		<div class="flex items-center gap-4">
+			{/* @ts-expect-error */}
+			<NpmPackageSearchButton client:load />
+
 			<div class="hidden md:flex md:items-center md:gap-4">
+				<div class="bg-border h-8 w-px"></div>
 				<DonateButton />
 				<AboutButton />
-				<div class="bg-border h-8 w-px"></div>
 			</div>
 
+			<div class="bg-border h-8 w-px"></div>
 			<ThemeButton client:load />
 		</div>
 	</div>