mirror of https://github.com/ethereum/go-ethereum
Corwin Smith
2 years ago
commit
d7ea2df124
@ -1,30 +1,59 @@ |
|||||||
import { FC } from 'react'; |
import { FC, useState } from 'react'; |
||||||
import { Input, InputGroup, 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'; |
||||||
|
|
||||||
export const Search: FC = () => { |
export const Search: FC = () => { |
||||||
|
const [query, setQuery] = useState<string>(''); |
||||||
|
|
||||||
|
// Handlers
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => { |
||||||
|
setQuery(e.target.value); |
||||||
|
}; |
||||||
|
|
||||||
return ( |
return ( |
||||||
<Stack |
<Stack |
||||||
borderBottom={{ base: BORDER_WIDTH, md: 'none' }} |
borderBottom={{ base: BORDER_WIDTH, md: 'none' }} |
||||||
borderRight={{ base: 'none', md: BORDER_WIDTH }} |
borderRight={{ base: 'none', md: BORDER_WIDTH }} |
||||||
borderColor={{ base: 'bg', md: 'primary' }} |
borderColor={{ base: 'bg', md: 'primary' }} |
||||||
px={4} |
|
||||||
py={{ base: 8, md: 4 }} |
|
||||||
_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'> |
||||||
<Input |
<InputGroup alignItems='center'> |
||||||
variant='unstyled' |
<Input type="hidden" name="sites" value="geth.ethereum.org" /> |
||||||
placeholder='search' |
<Input |
||||||
size='md' |
type="text" |
||||||
_placeholder={{ color: { base: 'bg', md: 'primary' }, fontStyle: 'italic' }} |
name="q" |
||||||
/> |
py={{ base: 8, md: 4 }} |
||||||
<Stack pl={4} justifyContent='center' alignItems='center'> |
px={4} |
||||||
<LensIcon color={{ base: 'bg', md: 'primary' }} fontSize={{ base: '3xl', md: 'md' }} /> |
variant='unstyled' |
||||||
</Stack> |
placeholder='search' |
||||||
</InputGroup> |
size='md' |
||||||
|
_placeholder={{ color: { base: 'bg', md: 'primary' }, fontStyle: 'italic' }} |
||||||
|
value={query} |
||||||
|
onChange={handleChange} |
||||||
|
outlineOffset={4} |
||||||
|
/> |
||||||
|
<Button |
||||||
|
type="submit" |
||||||
|
px={4} |
||||||
|
me={2} |
||||||
|
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: 'xl' }} /> |
||||||
|
</Button> |
||||||
|
</InputGroup> |
||||||
|
</form> |
||||||
</Stack> |
</Stack> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue