Adam Uhlíř
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
|
|
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
|
import type { ReactElement } from 'react'
|
|
import Activity from 'remixicon-react/PulseLineIcon'
|
|
import { Link } from 'react-router-dom'
|
|
import { ROUTES } from '../routes'
|
|
import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
height: '100%',
|
|
},
|
|
content: {
|
|
maxWidth: 500,
|
|
marginBottom: theme.spacing(4),
|
|
'&:last-child': {
|
|
marginBottom: 0,
|
|
},
|
|
},
|
|
icon: {
|
|
height: '1rem',
|
|
},
|
|
}),
|
|
)
|
|
|
|
export default function TroubleshootConnectionCard(): ReactElement {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
|
|
<Grid item className={classes.content}>
|
|
<Typography variant="h1" align="center">
|
|
Uh oh, it looks like your node is not connected.
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item className={classes.content}>
|
|
<Typography align="center">
|
|
Please check your node status to fix the problem. You can also check out the{' '}
|
|
<MuiLink href={BEE_DOCS_HOST} target="_blank" rel="noreferrer">
|
|
Swarm Bee Docs
|
|
</MuiLink>{' '}
|
|
or ask for support on the{' '}
|
|
<MuiLink href={BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
|
|
Ethereum Swarm Discord
|
|
</MuiLink>
|
|
.
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item className={classes.content}>
|
|
<Typography align="center">
|
|
<Button
|
|
component={Link}
|
|
variant="contained"
|
|
startIcon={<Activity className={classes.icon} />}
|
|
to={ROUTES.STATUS}
|
|
>
|
|
Check node status
|
|
</Button>
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
)
|
|
}
|