reverse-proxy-frontend/src/features/server/components/ActiveSessionComponent.js

75 lines
2.4 KiB
JavaScript

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Collapse from "@material-ui/core/Collapse";
import Avatar from "@material-ui/core/Avatar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded";
import ActiveSessionSummary from "./ActiveSessionSummary";
import styles from "../../../components/common/styles/expandableCardStyles";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles(styles);
const ActiveSessionComponent = ({ session }) => {
const classes = useStyles();
const { t } = useTranslation();
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Card>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
<SurroundSoundRoundedIcon />
</Avatar>
}
action={
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
}
title={<strong>{t("Server.ActiveSession")}</strong>}
subheader={t("Server.ActiveSessionSubtitle")}
/>
<CardContent>
<ActiveSessionSummary session={session} />
</CardContent>
<CardActions disableSpacing></CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>Method:</Typography>
<Typography paragraph>
Tabel ca cel de pana acum cu redirectarile. From va fi link si la
click va deschide in tab nou aplicatia
</Typography>
</CardContent>
</Collapse>
</Card>
);
};
ActiveSessionComponent.propTypes = {
session: PropTypes.object.isRequired
};
export default ActiveSessionComponent;