text: import React from "react";
  import { makeStyles, fade } from "@material-ui/core/styles";
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import InputBase from '@material-ui/core/InputBase';
  import SearchIcon from '@material-ui/icons/Search';
  import DataContext from '../DataContext';
  
  const useStyles = makeStyles(theme => ({
    searchBar: {
      backgroundColor: '#d70f64'
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginRight: theme.spacing(2),
      marginLeft: theme.spacing(2),
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
      },
    },
    searchIcon: {
      width: theme.spacing(7),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 7),
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: 200,
      },
    },
  }));
  
  const SearchBar = () => {
    const classes = useStyles();
    const { setSearchPhrase } = React.useContext(DataContext);
  
    return (
      <AppBar position="static" className={classes.searchBar}>
      <Toolbar>
        <div className={classes.search}>
          <div className={classes.searchIcon}>
            <SearchIcon />
          </div>
          <InputBase
            placeholder="Suche…"
            classes={{
              root: classes.inputRoot,
              input: classes.inputInput,
            }}
            inputProps={{ 'aria-label': 'Suche' }}
            onChange={(e) => setSearchPhrase(e.target.value)}
          />
        </div>
      </Toolbar>
    </AppBar>
    );
  };
  
  export default SearchBar;
  