feat(SearchBar): Add selectable search engines

src/shared/components/SearchBar.tsx

@@ -1,14 +1,20 @@
 import { InputAdornment, TextField } from "@mui/material";
 import SearchIcon from '@mui/icons-material/Search';
 import { useContext, useState } from "react";
+import SearchEngines from '@Data/searchEngines.json'
 import { urlbar } from "webextension-polyfill";
 
 export default function SearchBar() {
     const [searchTerm, setSearchTerm] = useState("")
+    const [searchProvider, setSearchProvider] = useState<string>(
+        JSON.parse(localStorage.getItem("searchProvider") as string) as string ??
+        "DuckDuckGo"
+    )
 
-    const handleKeydown = (e: React.KeyboardEvent<HTMLDivElement>) => {    
+    const handleKeydown = (e: React.KeyboardEvent<HTMLDivElement>) => {
         if (e.key === 'Enter') {
-            window.open(`https://www.google.com/search?udm=14&q=${encodeURIComponent(searchTerm)}`)
+            const selectedSearchEngine = SearchEngines.find((searchEngine) => {return searchEngine.name === searchProvider})
+            window.open(selectedSearchEngine?.searchString.replace("%SEARCHPARAM%", encodeURIComponent(searchTerm)))
         }
     }
 

src/shared/data/searchEngines.json

@@ -0,0 +1,22 @@
+[
+    {
+        "name": "Google",
+        "searchString": "https://www.google.com/search?q=%SEARCHPARAM%"
+    },
+    {
+        "name": "Google UDM14",
+        "searchString": "https://www.google.com/search?udm=14&q=%SEARCHPARAM%"
+    },
+    {
+        "name": "Startpage",
+        "searchString": "https://www.startpage.com/sp/search?query=%SEARCHPARAM%"
+    },
+    {
+        "name": "DuckDuckGo",
+        "searchString": "https://duckduckgo.com/?q=%SEARCHPARAM%"
+    },
+    {
+        "name": "Qwant",
+        "searchString": "https://www.qwant.com/?q=%s"
+    }
+]