feat(SearchBar): Add basic search bar component

src/shared/components/SearchBar.tsx

@@ -0,0 +1,29 @@
+import { InputAdornment, TextField } from "@mui/material";
+import SearchIcon from '@mui/icons-material/Search';
+import { useContext, useState } from "react";
+import { urlbar } from "webextension-polyfill";
+
+export default function SearchBar() {
+    const [searchTerm, setSearchTerm] = useState("")
+
+    const handleKeydown = (e: React.KeyboardEvent<HTMLDivElement>) => {    
+        if (e.key === 'Enter') {
+            window.open(`https://www.google.com/search?udm=14&q=${encodeURIComponent(searchTerm)}`)
+        }
+    }
+
+    return (
+        <TextField
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            onKeyDown={handleKeydown}
+            InputProps={{
+                endAdornment: (             
+                    <InputAdornment position="end">
+                        <SearchIcon />  
+                    </InputAdornment>
+                )
+            }}
+        />
+    )
+}

src/site/App.tsx

@@ -8,6 +8,7 @@ import { CurrentPageContext } from '../shared/contexts/CurrentPageContext'
 import SettingsPage from '../shared/components/settingsPage'
 import LinkList from '../shared/components/LinkList'
 import AppSnackBar from '../shared/components/AppSnackBar'
+import SearchBar from '../shared/components/SearchBar'
 
 const useLocalStorage = (storageKey: string, fallbackState: any) => {
     const [value, setValue] = React.useState(
@@ -29,7 +30,10 @@ function App() {
         <MenuDrawer />
         <Container sx={{ mt: 4, mb: 4 }} maxWidth="lg">
             {currentPage === 'home' ? (
-                <LinkList />
+                <>
+                    <SearchBar />
+                    <LinkList />
+                </>
             ): null}
             {currentPage === 'edit' ? (
                 <SettingsPage />