{"size": 998, "ext": "js", "max_stars_repo_path": "frontoffice/src/layout/LogoTitle.js", "max_stars_repo_name": "chemins-de-la-transition/semapps", "max_stars_repo_stars_event_min_datetime": "2022-02-03T13:05:05.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-11T21:57:30.000Z", "max_issues_repo_path": "frontoffice/src/layout/LogoTitle.js", "max_issues_repo_name": "chemins-de-la-transition/semapps", "max_issues_repo_issues_event_min_datetime": "2021-02-28T18:30:25.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T13:43:34.000Z", "max_forks_repo_path": "frontoffice/src/layout/LogoTitle.js", "max_forks_repo_name": "chemins-de-la-transition/semapps", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 181, "max_forks_count": null, "avg_line_length": 26.2631578947, "max_line_length": 106, "alphanum_fraction": 0.628256513}
import React from 'react';
import { makeStyles, Box } from '@material-ui/core';
import { Link } from 'react-router-dom';

const logoHeight = 77;
const logoHeightSmall = 40;
const breakPointlimit = 720;
const useStyles = makeStyles((theme) => ({
  logo: {
    height: logoHeight,
    verticalAlign: 'middle',
    [theme.breakpoints.down(breakPointlimit)]: {
      height: logoHeightSmall,
    },
  },
  logoBox: {
    height: logoHeight,
    [theme.breakpoints.down(breakPointlimit)]: {
      height: logoHeightSmall,
    },
  },
}));

const LogoTitle = ({ title, classes, ...other }) => {
  const classesLogo = useStyles();
  return (
    <Box className={classesLogo.logoBox} flexShrink={0} {...other}>
      <Link to="/" className={classes ? classes.menuLink : ''}>
        <Box display="flex" alignItems="center">
          <img src={process.env.PUBLIC_URL + '/logoCut512.png'} alt="logo" className={classesLogo.logo} />
        </Box>
      </Link>
    </Box>
  );
};

export default LogoTitle;
