import React, { useState } from 'react' import { Box, Input, Grid, Select, Label } from 'theme-ui' import SearchIcon from '../images/icons/search.inline.svg' import { githubLanguages } from '../data/githubLanguages' const Search = ({ searchState, onSearchChange, onSortChange, onFilterChange, onSearchIconClick, }) => { const [valueInput, setValueInput] = useState('') const [valueSelectStars, setValueSelectStars] = useState('') const [valueSelectLanguage, setValueSelectLanguage] = useState('') return ( <Grid columns={[1, 2]}> <Box sx={{ width: '100%', color: 'text', fontFamily: 'inter', position: 'relative', }} > <Input sx={{ backgroundColor: 'cardBackground', color: 'text', borderWidth: 1, borderStyle: 'solid', borderColor: 'cardBorder', borderRadius: 8, height: 45, fontSize: 15, pr: '40px', '&:focus': { outline: 0, }, '@media only screen and (max-width: 320px)': { fontSize: 13, }, }} value={valueInput} onChange={e => setValueInput(e.target.value)} onKeyPress={e => e.key === 'Enter' ? onSearchIconClick( valueInput, valueSelectStars, valueSelectLanguage ) : {} } placeholder="Search Covid-19 related repos" /> <SearchIcon style={{ top: 10, right: 10, width: 22, height: 22, cursor: 'pointer', position: 'absolute', }} onClick={() => onSearchIconClick(valueInput, valueSelectStars, valueSelectLanguage) } /> <Label sx={{ fontSize: 9, padding: '0px 3px', display: 'block', mt: '8px', opacity: '0.6', }} > Press Enter when you are done (GitHub API has a rate limit of <a style={{ cursor: 'pointer', color: 'rgb(255, 65, 54)' }} href="https://developer.github.com/v3/search/#rate-limit" target="_blank" rel="noopener noreferrer" > <b> 10 requests per minute </b> </a> if something not working please wait...) </Label> </Box> <Grid columns={[2, 2]} sx={{ width: '100%', color: 'white', fontFamily: 'inter', }} > <Box> <Select sx={{ backgroundColor: 'cardBackground', color: 'text', borderWidth: 1, borderStyle: 'solid', borderColor: 'cardBorder', borderRadius: 8, height: 45, '& + svg': { fill: 'text', }, fontSize: 15, '@media only screen and (max-width: 320px)': { fontSize: 13, }, '&:focus': { outline: 0, }, }} value={valueSelectStars} onChange={e => setValueSelectStars(e.target.value)} > <option value="stars">Sort by Stars</option> <option value="">Sort by Best Match</option> <option value="help-wanted-issues"> Sort by Help Wanted Issues </option> </Select> </Box> <Box> <Select sx={{ backgroundColor: 'cardBackground', color: 'text', borderWidth: 1, borderStyle: 'solid', borderColor: 'cardBorder', borderRadius: 8, height: 45, '& + svg': { fill: 'text', }, fontSize: 15, '@media only screen and (max-width: 320px)': { fontSize: 13, }, '&:focus': { outline: 0, }, }} value={valueSelectLanguage} onChange={e => setValueSelectLanguage(e.target.value)} > <option value="">All Languages</option> {githubLanguages.map(lang => ( <option key={lang} value={lang}> {lang} </option> ))} </Select> </Box> </Grid> </Grid> ) } export default Search