fix aiSearchBar component (#1858)

* fix aiSearchBar component

* Update SearchButton.tsx

navigator checked when the component loaded on browser side

---------

Co-authored-by: Dwight Lyle <dwightjl@gmail.com>
Co-authored-by: Amine E <aelmanaa@users.noreply.github.com>

Author: 3 people

src/components/Header/aiSearch/SearchButton.tsx

@@ -1,5 +1,6 @@
 import { clsx } from "~/lib"
 import styles from "./searchButton.module.css"
+import { useEffect, useState } from "react"
 
 const searchIcon = (
   <svg
@@ -25,6 +26,12 @@ const searchIcon = (
 )
 
 export const SearchButton = ({ variant }: { variant: "default" | "bottomBar" }) => {
+  const [isMac, setIsMac] = useState(false)
+  useEffect(() => {
+    const checkIsMac = typeof navigator !== "undefined" ? navigator.userAgent.toUpperCase().indexOf("MAC") >= 0 : false
+    setIsMac(checkIsMac)
+  }, [])
+
   return variant === "default" ? (
     <button className={clsx(styles.default, "search-widget-trigger")}>
       <svg
@@ -48,7 +55,7 @@ export const SearchButton = ({ variant }: { variant: "default" | "bottomBar" })
         </defs>
       </svg>
       <span className={styles.text}>Search Chainlink Docs</span>
-      <div className={styles.shortcut}>⌘K</div>
+      <div className={styles.shortcut}>{isMac ? "⌘" : "Ctrl+"}K</div>
     </button>
   ) : (
     <button className={clsx(styles.bottomBar, "search-widget-trigger")}>