feat(ui): create kbar search trigger component and add it on Header

src/app/(blog)/components/header/index.tsx

@@ -5,9 +5,9 @@ import Link from 'next/link'
 import { useGlitch } from 'react-powerglitch'
 
 import { ToggleTheme } from './toggle-theme'
-import { Search } from './search'
 import { CategorySelector } from './category-selector'
-import { MobileMenu } from './mobile-menu/index'
+import { MobileMenu } from './mobile-menu'
+import { Search } from './search'
 
 export function Header() {
   const [percentScrollPosition, setPercentScrollPosition] = useState(0)
@@ -62,12 +62,10 @@ export function Header() {
   return (
     <header
       className={`fixed top-3 left-3 right-3 z-10 rounded-xl bg-neutral-100/80 backdrop-blur-lg dark:bg-neutral-1000/80 md:top-0 md:right-0 md:left-0 md:w-full md:rounded-none ${
-        isNotOnTop ? 'py-3' : 'py-3 md:py-6'
-      } border border-neutral-50 dark:border-neutral-800 md:border-b md:border-none ${
         isNotOnTop
-          ? 'md:border-b-neutral-50 md:dark:border-b-neutral-800'
-          : 'md:border-b-transparent'
-      }`}
+          ? 'py-3 md:border-b-neutral-50 md:dark:border-b-neutral-800'
+          : 'py-3 md:border-b-transparent md:py-6'
+      } border border-neutral-50 dark:border-neutral-800 md:border-b md:border-none`}
     >
       <div className="blog-content-w m-auto flex flex-wrap items-center justify-between">
         <div className="md:hidden" />

src/app/(blog)/components/header/search.tsx

@@ -0,0 +1,21 @@
+import { MagnifyingGlass } from '@/shared/lib/phosphor-icons'
+import { useKBar } from 'kbar'
+
+export function Search() {
+  const {
+    query: { toggle }
+  } = useKBar()
+
+  return (
+    <button
+      onClick={toggle}
+      className="flex flex-1 cursor-text items-center gap-5 rounded-xl bg-neutral-200/30 p-2 text-sm leading-none backdrop-blur-3xl dark:bg-neutral-800/30"
+    >
+      <span className="flex items-center gap-3">
+        <MagnifyingGlass />
+        <span className="text-neutral-400">Search...</span>
+      </span>
+      <kbd className="keyboard hidden md:flex">Ctrl K</kbd>
+    </button>
+  )
+}

src/styles/components.css

@@ -11,6 +11,7 @@
     @apply bg-neutral-100 p-1 dark:bg-neutral-900;
     @apply rounded-lg border border-neutral-200 dark:border-neutral-700;
     @apply text-neutral-500;
+    @apply leading-none;
   }
 
   .post-content {