Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 1x 1x | import React, { useState, useEffect } from "react"; import { Grid, Input, InputAdornment, Theme, IconButton, Switch, FormControlLabel } from "@mui/material"; import { Search as SearchIcon } from "@mui/icons-material"; import { VERIFIED_SOURCES } from "../../../utils"; import { VerifiedSource } from "../../../components/VerifiedSource"; import { createStyles, makeStyles } from "@mui/styles"; interface Props { title: string; onSearch: Function; initialQ: string; showOnlyVerified: boolean; toggleShowVerified: () => void; } const useStyles = makeStyles((theme: Theme) => createStyles({ title: { marginBottom: "2vw" }, searchInput: { textAlign: "center", fontSize: "larger" }, searchContainer: { justifyItems: "center", display: "grid", position: "sticky", background: "transparent", width: "100%", margin: theme.spacing(2), padding: theme.spacing(2) } }) ); const ContainerSearch: React.FC<Props> = ({ title, onSearch, initialQ, showOnlyVerified, toggleShowVerified }) => { const classes = useStyles(); const [q, setQ] = useState(initialQ); useEffect( () => (showOnlyVerified ? onSearch(VERIFIED_SOURCES[0]) : onSearch()), // eslint-disable-next-line react-hooks/exhaustive-deps [showOnlyVerified] ); return ( <Grid className={classes.searchContainer} item xs={12}> <form onSubmit={e => { e.preventDefault(); onSearch(q); }} > <Input inputProps={{ className: classes.searchInput }} onChange={e => setQ(e.target.value)} value={q} color="secondary" type="search" fullWidth placeholder={`Search ${title}`} data-testid="searchInput" endAdornment={ <InputAdornment position="end"> <IconButton onClick={() => onSearch(q)} data-testid="searchButton" > <SearchIcon /> </IconButton> </InputAdornment> } /> </form> <FormControlLabel control={ <Switch checkedIcon={<VerifiedSource />} checked={showOnlyVerified} onChange={toggleShowVerified} color="primary" name="displayVerified" /> } label={ showOnlyVerified ? `Showing verified ${title} only` : `Show verified ${title} only` } /> </Grid> ); }; export default ContainerSearch; |