forked from jhackshaw/tspvis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
MenuHeader.jsx
73 lines (67 loc) · 2.18 KB
/
MenuHeader.jsx
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
import React from "react";
import { useDispatch } from "react-redux";
import { Grid, Typography, IconButton, Tooltip } from "@material-ui/core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faInfoCircle,
faBriefcase,
faDonate
} from "@fortawesome/free-solid-svg-icons";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { makeStyles } from "@material-ui/styles";
import { MenuSection } from "./MenuSection";
import * as actions from "../store/actions";
const useStyles = makeStyles(theme => ({
root: {
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3)
},
title: {
fontSize: "1.2rem"
}
}));
export const MenuHeader = props => {
const classes = useStyles();
const dispatch = useDispatch();
const onOpenSiteInfo = () => {
dispatch(actions.toggleSiteInfoOpen());
};
return (
<MenuSection>
<Grid container justify="space-between" alignItems="center">
<Typography
gutterBottom
display="inline"
variant="button"
component="h1"
classes={{ root: classes.title }}
>
<FontAwesomeIcon icon={faBriefcase} width="0" /> TSPVIS
</Typography>
<Typography gutterBottom display="inline" color="textSecondary">
<Tooltip title="Source code">
<IconButton
target="_blank"
href="https://github.com/jhackshaw/tspvis"
>
<FontAwesomeIcon icon={faGithub} size="xs" width="0" />
</IconButton>
</Tooltip>
<Tooltip title="General site information">
<IconButton onClick={onOpenSiteInfo} edge="end">
<FontAwesomeIcon icon={faInfoCircle} size="xs" width="0" />
</IconButton>
</Tooltip>
</Typography>
</Grid>
<Typography variant="subtitle2" color="textSecondary">
Visualize algorithms for the traveling salesman problem. Use the
controls below to plot points, choose an algorithm, and control
execution.
<br />
(Hint: try a construction alogorithm followed by an improvement
algorithm)
</Typography>
</MenuSection>
);
};