fix env var typescript

Author: mimurawil

src/components/Header/Header.astro

@@ -3,6 +3,10 @@ import NotificationBanner from "~/features/notifications/components/Notification
 import { NavBar } from "./NavBar"
 
 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 || "",
+}
 ---
 
 <!-- Google Tag Manager (noscript) -->
@@ -12,6 +16,6 @@ const path = Astro.url.pathname
   width="0"
   style="display:none;visibility:hidden"></iframe>
 <!-- End Google Tag Manager (noscript) -->
-<NavBar path={path} client:idle />
+<NavBar path={path} client:idle algoliaVars={algoliaVars} />
 
 <NotificationBanner />

src/components/Header/NavBar.tsx

@@ -5,7 +5,15 @@ import { getNavigationProps } from "./getNavigationProps"
 import { useNavBar } from "./useNavBar/useNavBar"
 import styles from "./scroll.module.css"
 
-export const NavBar = ({ path, showSearch = true }: { path: string; showSearch?: boolean }) => {
+export const NavBar = ({
+  path,
+  showSearch = true,
+  algoliaVars,
+}: {
+  path: string
+  showSearch?: boolean
+  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+}) => {
   const navRef = React.useRef(null)
 
   const { setNavBarInfo } = useNavBar()
@@ -47,7 +55,7 @@ export const NavBar = ({ path, showSearch = true }: { path: string; showSearch?:
       <Nav
         {...getNavigationProps()}
         path={path}
-        searchTrigger={showSearch ? <Search /> : undefined}
+        searchTrigger={showSearch ? <Search algoliaVars={algoliaVars} /> : undefined}
         onHideChange={onHideChange}
         doubleNavbar={doubleNavbar()}
       />

src/components/Header/aiSearch/Search.tsx

@@ -1,9 +1,12 @@
 import { SearchButton } from "chainlink-algolia-search"
 import "chainlink-algolia-search/dist/index.css"
 
-const algoliaAppId = import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID || ""
-const algoliaPublicApiKey = import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY || ""
-
-export const Search = ({ variant = "default" }: { variant?: "default" | "mobile" }) => {
+export const Search = ({
+  variant = "default",
+  algoliaVars: { algoliaAppId, algoliaPublicApiKey },
+}: {
+  variant?: "default" | "mobile"
+  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+}) => {
   return <SearchButton algoliaAppId={algoliaAppId} algoliaPublicApiKey={algoliaPublicApiKey} />
 }