text: /*eslint-disable*/
  import React from "react";
  // react components for routing our app without refresh
  import { Link } from "react-router-dom";
  
  // @material-ui/core components
  import { makeStyles } from "@material-ui/core/styles";
  import List from "@material-ui/core/List";
  import ListItem from "@material-ui/core/ListItem";
  import Tooltip from "@material-ui/core/Tooltip";
  
  // core components
  import Button from "components/CustomButtons/Button.js";
  
  import styles from "assets/jss/material-kit-react/components/headerLinksStyle.js";
  
  const useStyles = makeStyles(styles);
  
  export default function HeaderLinks(props) {
    const classes = useStyles();
    return (
      <List className={classes.list}>
        <ListItem className={classes.listItem}>
          <Tooltip
            id=""
            title="LinkedIn"
            placement={window.innerWidth > 959 ? "top" : "left"}
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              href="https://www.linkedin.com/in/ra%C3%BAl-jimroj/"
              target="_blank"
              color="transparent"
              className={classes.navLink}
            >
              <i className={classes.socialIcons + " fab fa-linkedin"} />
            </Button>
          </Tooltip>
        </ListItem>
        <ListItem className={classes.listItem}>
          <Tooltip
            id=""
            title="GitHub"
            placement={window.innerWidth > 959 ? "top" : "left"}
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              color="transparent"
              href="https://github.com/rauljimenezemp"
              target="_blank"
              className={classes.navLink}
            >
              <i className={classes.socialIcons + " fab fa-github"} />
            </Button>
          </Tooltip>
        </ListItem>
        <ListItem className={classes.listItem}>
          <Tooltip
            id=""
            title="Facebook"
            placement={window.innerWidth > 959 ? "top" : "left"}
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              color="transparent"
              href="https://www.facebook.com/rauljimroj/"
              target="_blank"
              className={classes.navLink}
            >
              <i className={classes.socialIcons + " fab fa-facebook"} />
            </Button>
          </Tooltip>
        </ListItem>
        <ListItem className={classes.listItem}>
          <Tooltip
            id=""
            title="Instagram"
            placement={window.innerWidth > 959 ? "top" : "left"}
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              color="transparent"
              href="https://www.instagram.com/raul_jimroj/"
              target="_blank"
              className={classes.navLink}
            >
              <i className={classes.socialIcons + " fab fa-instagram"} />
            </Button>
          </Tooltip>
        </ListItem>
      </List>
    );
  }
  