feat: implement SearchEngineBar component and update SearchBarWithLogo to use it

Author: medyo

src/components/Elements/SearchBar/SearchBar.tsx

@@ -1,26 +1,21 @@
 import React, { useEffect, useRef } from 'react'
-import { HiSparkles } from 'react-icons/hi'
-import { AI_PROMPT_ENGINES } from 'src/config/SearchEngines'
-import { trackSearchEngineUse } from 'src/lib/analytics'
-import { useUserPreferences } from 'src/stores/preferences'
-
-export const SearchBar = () => {
-  const { promptEngine, promptEngines } = useUserPreferences()
-  const mergedEngines = [...AI_PROMPT_ENGINES, ...promptEngines]
 
+type SearchBarProps = {
+  iconStart?: React.ReactNode
+  placeholder: string
+  onSubmit?: (keyword: string) => void
+  onChange?: (keyword: string) => void
+}
+export const SearchBar = ({ iconStart, placeholder, onChange, onSubmit }: SearchBarProps) => {
   const keywordsInputRef = useRef<HTMLInputElement | null>(null)
-  const usedSearchEngine =
-    mergedEngines.find((engine) => engine.label.toLowerCase() === promptEngine.toLowerCase()) ||
-    promptEngines[0]
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const target = e.target as typeof e.target & {
       keyword: { value: string }
     }
 
-    trackSearchEngineUse(usedSearchEngine.label)
-    window.open(`${usedSearchEngine.url}${target.keyword.value}`, '_self')
+    onSubmit?.(target.keyword.value)
   }
 
   useEffect(() => {
@@ -29,20 +24,14 @@ export const SearchBar = () => {
 
   return (
     <form className="searchBar" onSubmit={handleSubmit}>
-      {usedSearchEngine?.default === false ? (
-        <HiSparkles className="searchBarIcon" />
-      ) : (
-        <img
-          className={'searchBarIcon'}
-          src={`/searchengine_logos/${usedSearchEngine.label.toLowerCase()}_logo.svg`}
-        />
-      )}
+      {iconStart}
       <input
         ref={keywordsInputRef}
         type="text"
         name="keyword"
+        onChange={(e) => onChange?.(e.target.value)}
         className="searchBarInput"
-        placeholder={`Ask ${usedSearchEngine.label}`}
+        placeholder={placeholder}
       />
     </form>
   )

src/components/Elements/SearchBar/SearchEngineBar.tsx

@@ -0,0 +1,34 @@
+import { HiSparkles } from 'react-icons/hi'
+import { AI_PROMPT_ENGINES } from 'src/config/SearchEngines'
+import { trackSearchEngineUse } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
+import { SearchBar } from './SearchBar'
+
+export const SearchEngineBar = () => {
+  const { promptEngine, promptEngines } = useUserPreferences()
+  const mergedEngines = [...AI_PROMPT_ENGINES, ...promptEngines]
+
+  const usedSearchEngine =
+    mergedEngines.find((engine) => engine.label.toLowerCase() === promptEngine.toLowerCase()) ||
+    promptEngines[0]
+
+  return (
+    <SearchBar
+      iconStart={
+        usedSearchEngine.default === false ? (
+          <HiSparkles className="searchBarIcon" />
+        ) : (
+          <img
+            className={'searchBarIcon'}
+            src={`/searchengine_logos/${usedSearchEngine.label.toLowerCase()}_logo.svg`}
+          />
+        )
+      }
+      onSubmit={(keyword) => {
+        trackSearchEngineUse(usedSearchEngine.label)
+        window.open(`${usedSearchEngine.url}${keyword}`, '_self')
+      }}
+      placeholder={`Ask ${usedSearchEngine.label}`}
+    />
+  )
+}

src/components/Elements/SearchBarWithLogo/SearchBarWithLogo.tsx

@@ -1,7 +1,7 @@
 import { HiSparkles } from 'react-icons/hi'
 import { AI_PROMPT_ENGINES } from 'src/config/SearchEngines'
 import { useUserPreferences } from 'src/stores/preferences'
-import { SearchBar } from '../SearchBar/SearchBar'
+import { SearchEngineBar } from '../SearchBar/SearchEngineBar'
 import './SearchBarWithLogo.css'
 
 export const SearchBarWithLogo = () => {
@@ -25,7 +25,7 @@ export const SearchBarWithLogo = () => {
         />
       )}
 
-      <SearchBar />
+      <SearchEngineBar />
     </div>
   )
 }