1import Link from 'next/link';
 2import {makeStyles} from '@material-ui/core/styles';
 3import useProfile from '../../hooks/useProfile';
 4import useSettings from '../../hooks/useSettings';
 5
 6const Logo = () => {
 7  const classes = useStyles();
 8  const {connected} = useProfile();
 9  const settings = useSettings();
10  const appLink = connected ? '/dashboard' : settings?.['about_link'] || '';
11  return (
12    <div className={classes.layout}>
13      <Link href={appLink} className={classes.link}>
14        <img
15          src={'/assets/Caroster_beta.png'}
16          alt="Caroster"
17          className={classes.logo}
18        />
19      </Link>
20    </div>
21  );
22};
23
24const useStyles = makeStyles(theme => ({
25  layout: {
26    display: 'flex',
27    justifyContent: 'center',
28    alignItems: 'center',
29    paddingTop: theme.spacing(4),
30    paddingBottom: theme.spacing(4),
31  },
32  link: {
33    width: '100%',
34  },
35  logo: {
36    display: 'block',
37    width: '55%',
38    height: 'auto',
39    margin: '0 auto',
40  },
41}));
42export default Logo;