interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Paul Wackerow 2022-12-07 15:47:35 -08:00
parent 871f55587e
commit e8faee0bd3
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
1 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/UI/search/Search.tsx
View File

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