68/add google env to search

.env.example

@@ -3,3 +3,8 @@ ALGOLIA_WRITE_API_KEY=
 ALGOLIA_INDEX_NAME=docs-test
 PUBLIC_ALGOLIA_SEARCH_APP_ID=
 PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY=
+
+# Google AI Search
+PUBLIC_GOOGLE_PROJECT_ID=
+PUBLIC_GOOGLE_APP_ID=
+PUBLIC_GOOGLE_ACCESS_TOKEN=

src/components/Header/Header.astro

@@ -9,6 +9,9 @@ const path = Astro.url.pathname
 const algoliaVars = {
   algoliaAppId: import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID || "",
   algoliaPublicApiKey: import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY || "",
+  googleProjectId: import.meta.env.PUBLIC_GOOGLE_PROJECT_ID || "",
+  googleAppId: import.meta.env.PUBLIC_GOOGLE_APP_ID || "",
+  googleAccessToken: import.meta.env.PUBLIC_GOOGLE_ACCESS_TOKEN || "",
 }
 ---
 

src/components/Header/Nav/config.tsx

@@ -58,3 +58,11 @@ export type AppConfig = {
   productsNav: ProductsNav
   subProductsNav?: SubProductsNav
 } & LinksConfig
+
+export type AlgoliaVars = {
+  algoliaAppId: string
+  algoliaPublicApiKey: string
+  googleProjectId: string
+  googleAppId: string
+  googleAccessToken: string
+}

src/components/Header/NavBar.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React, { lazy, Suspense, useEffect, useState } from "react"
 import { NavBar as Nav } from "./Nav/index.ts"
-import { Search } from "./aiSearch/Search.tsx"
 import { useNavBar } from "./useNavBar/useNavBar.ts"
 import styles from "./scroll.module.css"
-import { ProductsNav, SubProductsNav } from "./Nav/config.tsx"
+import { AlgoliaVars, ProductsNav, SubProductsNav } from "./Nav/config.tsx"
+
+const LazySearch = lazy(() => import("./aiSearch/Search.tsx"))
 
 export const NavBar = ({
   productsNav,
@@ -16,9 +17,10 @@ export const NavBar = ({
   subProductsNav: SubProductsNav
   path: string
   showSearch?: boolean
-  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+  algoliaVars: AlgoliaVars
 }) => {
   const navRef = React.useRef(null)
+  const [isClient, setIsClient] = useState(false)
 
   const { setNavBarInfo } = useNavBar()
 
@@ -54,13 +56,23 @@ export const NavBar = ({
     }
   }
 
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
   return (
     <span ref={navRef}>
       <Nav
         productsNav={productsNav}
         subProductsNav={subProductsNav}
         path={path}
-        searchTrigger={showSearch ? <Search algoliaVars={algoliaVars} /> : undefined}
+        searchTrigger={
+          isClient && showSearch ? (
+            <Suspense fallback={null}>
+              <LazySearch algoliaVars={algoliaVars} />
+            </Suspense>
+          ) : undefined
+        }
         onHideChange={onHideChange}
         doubleNavbar={doubleNavbar()}
       />

src/components/Header/aiSearch/Search.tsx

@@ -1,10 +1,11 @@
 import { SearchButton } from "chainlink-algolia-search"
 import "chainlink-algolia-search/dist/index.css"
+import { AlgoliaVars } from "../Nav/config.tsx"
 
-export const Search = ({
-  algoliaVars: { algoliaAppId, algoliaPublicApiKey },
+const Search = ({
+  algoliaVars: { algoliaAppId, algoliaPublicApiKey, googleProjectId, googleAppId, googleAccessToken },
 }: {
-  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+  algoliaVars: AlgoliaVars
 }) => {
   return (
     <SearchButton
@@ -18,6 +19,11 @@ export const Search = ({
         },
         { url: "https://dev.chain.link/tools", imgSrc: "/images/algolia/tools.png", label: "Tools" },
       ]}
+      googleProjectId={googleProjectId}
+      googleAppId={googleAppId}
+      googleAccessToken={googleAccessToken}
     />
   )
 }
+
+export default Search