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 'react-feather' ; import { Link } from 'react-router-dom' ; import { config } from '../config' ; import { ROUTES } from '../routes' ; const useStyles = makeStyles ( ( theme ) => createStyles ( { root : { height : '100%' , } , content : { maxWidth : 500 , marginBottom : theme . spacing ( 4 ) , '&:last-child' : { marginBottom : 0 , } , } , icon : { height : '1rem' , } , } ) ) ; export default function TroubleshootConnectionCard ( ) { 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 = { config . BEE_DOCS_HOST } target = "_blank" rel = "noreferrer" > Swarm Bee Docs < /MuiLink>{' '} or ask for support on the { ' ' } < MuiLink href = { config . 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>); }