add search component

components/Header.tsx

@@ -4,6 +4,7 @@ import Logo from '@/data/logo.svg'
 import Link from './Link'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
+import SearchButton from './SearchButton'
 
 const Header = () => {
   return (
@@ -24,20 +25,19 @@ const Header = () => {
           </div>
         </Link>
       </div>
-      <div className="flex items-center text-base leading-5">
-        <div className="hidden sm:block">
-          {headerNavLinks
-            .filter((link) => link.href !== '/')
-            .map((link) => (
-              <Link
-                key={link.title}
-                href={link.href}
-                className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
-              >
-                {link.title}
-              </Link>
-            ))}
-        </div>
+      <div className="flex items-center leading-5 space-x-4 sm:space-x-6">
+        {headerNavLinks
+          .filter((link) => link.href !== '/')
+          .map((link) => (
+            <Link
+              key={link.title}
+              href={link.href}
+              className="hidden sm:block font-medium text-gray-900 dark:text-gray-100"
+            >
+              {link.title}
+            </Link>
+          ))}
+        <SearchButton />
         <ThemeSwitch />
         <MobileNav />
       </div>

components/MobileNav.tsx

@@ -20,17 +20,13 @@ const MobileNav = () => {
   }
 
   return (
-    <div className="sm:hidden">
-      <button
-        className="ml-1 mr-1 h-8 w-8 rounded py-1"
-        aria-label="Toggle Menu"
-        onClick={onToggleNav}
-      >
+    <>
+      <button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
-          className="text-gray-900 dark:text-gray-100"
+          className="text-gray-900 dark:text-gray-100 h-8 w-8"
         >
           <path
             fillRule="evenodd"
@@ -45,11 +41,7 @@ const MobileNav = () => {
         }`}
       >
         <div className="flex justify-end">
-          <button
-            className="mr-5 mt-11 h-8 w-8 rounded"
-            aria-label="Toggle Menu"
-            onClick={onToggleNav}
-          >
+          <button className="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu" onClick={onToggleNav}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"
@@ -78,7 +70,7 @@ const MobileNav = () => {
           ))}
         </nav>
       </div>
-    </div>
+    </>
   )
 }
 

components/SearchButton.tsx

@@ -0,0 +1,34 @@
+import { AlgoliaButton } from 'pliny/search/AlgoliaButton'
+import { KBarButton } from 'pliny/search/KBarButton'
+import siteMetadata from '@/data/siteMetadata'
+
+const SearchButton = () => {
+  if (
+    siteMetadata.search &&
+    (siteMetadata.search.provider === 'algolia' || siteMetadata.search.provider === 'kbar')
+  ) {
+    const SearchButtonWrapper =
+      siteMetadata.search.provider === 'algolia' ? AlgoliaButton : KBarButton
+
+    return (
+      <SearchButtonWrapper aria-label="Search">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="text-gray-900 dark:text-gray-100 h-6 w-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          />
+        </svg>
+      </SearchButtonWrapper>
+    )
+  }
+}
+
+export default SearchButton

components/ThemeSwitch.tsx

@@ -17,14 +17,13 @@ const ThemeSwitch = () => {
   return (
     <button
       aria-label="Toggle Dark Mode"
-      className="ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4"
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
         fill="currentColor"
-        className="text-gray-900 dark:text-gray-100"
+        className="text-gray-900 dark:text-gray-100 h-6 w-6"
       >
         {mounted && theme === 'dark' ? (
           <path