update search to form get request

similar to existing site, using duckduckgo using the get method of a form element. Converted magnifying class wrapped in anchor tag to be a submit button instead

src/components/UI/search/Search.tsx

@@ -1,5 +1,5 @@
 import { FC, useState } from 'react';
-import { Input, InputGroup, Link, Stack } from '@chakra-ui/react';
+import { Button, Input, InputGroup, Stack } from '@chakra-ui/react';
 
 import { BORDER_WIDTH } from '../../../constants';
 import { LensIcon } from '../icons';
@@ -8,12 +8,6 @@ export const Search: FC = () => {
   const [query, setQuery] = useState<string>('');
 
   // Handlers
-  const handleSubmit = (e: React.FormEvent<HTMLInputElement>): void => {
-    document.getElementById('search-link')?.click();
-  };
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-    if (e.key === 'Enter') handleSubmit(e);
-  };
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     setQuery(e.target.value);
   };
@@ -24,33 +18,41 @@ export const Search: FC = () => {
       borderRight={{ base: 'none', md: BORDER_WIDTH }}
       borderColor={{ base: 'bg', md: 'primary' }}
       _hover={{ base: { bg: 'primary' }, md: { bg: 'none' } }}
-      >
+    >
-      <InputGroup>
+      <form method='get' action='https://duckduckgo.com/' role='search' target='blank'>
-        <Input
+        <InputGroup alignItems='center'>
-          py={{ base: 8, md: 4 }}
+          <Input type="hidden" name="sites" value="geth.ethereum.org" />
-          px={4}
+          <Input
-          variant='unstyled'
+            type="text"
-          placeholder='search'
+            name="q"
-          size='md'
+            py={{ base: 8, md: 4 }}
-          _placeholder={{ color: { base: 'bg', md: 'primary' }, fontStyle: 'italic' }}
+            px={4}
-          value={query}
+            variant='unstyled'
-          onChange={handleChange}
+            placeholder='search'
-          onKeyDown={handleKeyPress}
+            size='md'
-          outlineOffset={4}
+            _placeholder={{ color: { base: 'bg', md: 'primary' }, fontStyle: 'italic' }}
-        />
+            value={query}
-        <Link
+            onChange={handleChange}
-          href={`https://www.google.com/search?q=site:geth.ethereum.org%20${encodeURIComponent(query)}`}
+            outlineOffset={4}
-          isExternal
+          />
-          display='grid'
+          <Button
-          placeItems='center'
+            px={4}
-          id="search-link"
+            me={2}
-          px={4}
+            borderRadius='0'
-          py={{ base: 8, md: 4 }}
+            bg='none'
-          _focusVisible={{ outline: '2px solid var(--chakra-colors-primary)', outlineOffset: -4 }}
+            _focusVisible={{
-        >
+              outline: '2px solid var(--chakra-colors-primary)',
-          <LensIcon color={{ base: 'bg', md: 'primary' }} fontSize={{ base: '3xl', md: 'lg' }} />
+              outlineOffset: -2
-        </Link>
+            }}
-      </InputGroup>
+            _hover={{
+              bg: 'primary',
+              svg: { color: 'bg' }
+            }}
+          >
+            <LensIcon color={{ base: 'bg', md: 'primary' }} fontSize={{ base: '3xl', md: 'xl' }} />
+          </Button>
+        </InputGroup>
+      </form>
     </Stack>
   );
 };