import React from "react"; import PropTypes from "prop-types"; import { Grid, Typography, Link } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; import { useTranslation } from "react-i18next"; import styles from "../../../components/common/styles/gridStyles"; const useStyles = makeStyles(styles); const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => { const classes = useStyles(); const { t } = useTranslation(); return ( <Grid container> <Grid item xs={6} sm={3} md={3}> {`${t("Server.Domain")}: `} <span className={classes.value}>{data.domain.name}</span> </Grid> <Grid item xs={6} sm={3} md={3}> {`${t("Server.ServerHostName")}: `} <span className={classes.value}>{serverHost || ""}</span> </Grid> <Grid item xs={6} sm={3} md={3}> {`${t("Server.ApiHostName")}: `} <span className={classes.value}>{data.hosts.api}</span> </Grid> <Grid item xs={6} sm={3} md={3}> {`${t("Server.DDNSProvider")}: `} <Link href="#" onClick={handleOpenInNewTab(data.domain.provider.url)} variant="subtitle1" > {data.domain.provider.name} </Link> </Grid> <Grid item xs={12} sm={12} md={12}> <Typography variant="body2" gutterBottom color="textSecondary"> {t("Server.Thoughts")} </Typography> </Grid> </Grid> ); }; ServerSummary.propTypes = { data: PropTypes.object.isRequired, serverHost: PropTypes.string, handleOpenInNewTab: PropTypes.func.isRequired }; export default ServerSummary;