forked from cerc-io/laconic-console
81 lines
1.7 KiB
JavaScript
81 lines
1.7 KiB
JavaScript
//
|
|
// Copyright 2020 DXOS.org
|
|
//
|
|
|
|
import React from 'react';
|
|
import { makeStyles } from '@material-ui/core';
|
|
import MuiAppBar from '@material-ui/core/AppBar';
|
|
import Link from '@material-ui/core/Link';
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import blueGrey from '@material-ui/core/colors/blueGrey';
|
|
import GraphQLIcon from '@material-ui/icons/Adb';
|
|
|
|
import DXOSIcon from '../icons/DXOS';
|
|
import { graphqlApi } from '../client';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
offset: theme.mixins.denseToolbar,
|
|
|
|
logo: {
|
|
marginRight: theme.spacing(2),
|
|
color: theme.palette.grey[800],
|
|
|
|
'& svg': {
|
|
width: 100,
|
|
height: 48
|
|
}
|
|
},
|
|
|
|
logoLink: {
|
|
lineHeight: 0
|
|
},
|
|
|
|
title: {
|
|
display: 'flex',
|
|
flex: 1,
|
|
marginTop: 2,
|
|
color: theme.palette.grey[800]
|
|
},
|
|
|
|
link: {
|
|
color: blueGrey[900]
|
|
}
|
|
}));
|
|
|
|
const AppBar = ({ config }) => {
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<>
|
|
<MuiAppBar position='fixed'>
|
|
<Toolbar>
|
|
<Link classes={{ root: classes.logoLink }} href='/'>
|
|
<div className={classes.logo}>
|
|
<DXOSIcon />
|
|
</div>
|
|
</Link>
|
|
<div className={classes.title}>
|
|
<Typography variant='h6'>{config.app.title}</Typography>
|
|
</div>
|
|
<div>
|
|
<Link
|
|
className={classes.link}
|
|
href={graphqlApi(config)}
|
|
rel='noreferrer'
|
|
target='_blank'
|
|
title='Console GraphQL'
|
|
>
|
|
<GraphQLIcon />
|
|
</Link>
|
|
</div>
|
|
</Toolbar>
|
|
</MuiAppBar>
|
|
|
|
<div className={classes.offset} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AppBar;
|