feat: add search component and integrate into main application

- Introduced a new `Search` component to facilitate search functionality.
- Integrated the `Search` component into the main application, replacing the existing search button with the new component.
- Ensured the search button is rendered only if certain conditions are met, enhancing the application's dynamic behavior.

Author: nikhiltidke101

custom-implementation/src/components/search.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+
+export const Search = () => {
+  const isMac =
+    typeof window !== 'undefined'
+      ? navigator.userAgent.toUpperCase().indexOf('MAC') >= 0
+      : false
+
+  const [isClient, setIsClient] = useState<any>(false)
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  return (
+    <button
+      id="fern-search-button"
+      className="fern-search-bar w-full"
+      onClick={() => {
+        if ((window as any).plugSDK) {
+          (window as any).plugSDK.toggleSearchAgent()
+        }
+      }}>
+      <span className="search-placeholder">
+        <svg
+          width="1.5em"
+          height="1.5em"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          color="currentColor"
+          className="size-icon-md">
+          <path
+            d="M17 17L21 21"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"></path>
+          <path
+            d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"></path>
+        </svg>
+        <span>Search...</span>
+      </span>
+      <kbd className="keyboard-shortcut-hint">
+        {!isMac && isClient ? 'CTRL' : 'CMD'}&nbsp;+&nbsp; +
+      </kbd>
+    </button>
+  )
+}

custom-implementation/src/main.tsx

@@ -8,6 +8,7 @@ import React from 'react'
 import Header from './components/header'
 import Footer from './components/footer'
 import { ThemeSwitch } from './components/theme-switch'
+import { Search } from './components/search'
 
 import { getPageData } from './modules/sanity/utils'
 
@@ -26,6 +27,7 @@ const render = async () => {
   const sidenav = document.querySelector('button.fern-search-bar')
     ?.parentElement as HTMLElement
 
+  const searchButton = document.querySelector('button.fern-search-button')
 
   const theme = document.getElementsByTagName('html')[0].getAttribute('class')
 
@@ -36,6 +38,21 @@ const render = async () => {
     ReactDOM.render(React.createElement(ThemeSwitch), wrapper)
   }
 
+  // Replace search button with React Search component
+  if (searchButton && !document.getElementById('search-component-wrapper') && !document.getElementById('theme-switch')) {
+    const searchWrapper = document.createElement('div')
+    searchWrapper.setAttribute('id', 'search-component-wrapper')
+    searchWrapper.setAttribute('class', 'fern-sidebar-searchbar-container')
+    searchButton.parentNode?.replaceChild(searchWrapper, searchButton)
+
+    const wrapper = document.createElement('div')
+    wrapper.setAttribute('id', 'theme-switch')
+    sidenav.appendChild(wrapper)
+    
+    ReactDOM.render(React.createElement(Search), searchWrapper)
+    ReactDOM.render(React.createElement(ThemeSwitch), wrapper)
+  }
+
   const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID)
   const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID)