active session card
parent
99644e5503
commit
3800c35e5a
|
@ -8,7 +8,6 @@ import TechnologiesComponent from "./TechnologiesComponent";
|
|||
const AboutContainer = () => {
|
||||
return (
|
||||
<>
|
||||
<br />
|
||||
<AboutComponent />
|
||||
<br />
|
||||
<br />
|
||||
|
|
|
@ -0,0 +1,92 @@
|
|||
import React from "react";
|
||||
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 FavoriteIcon from "@material-ui/icons/Favorite";
|
||||
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
||||
import MoreVertIcon from "@material-ui/icons/MoreVert";
|
||||
import ShareRoundedIcon from "@material-ui/icons/ShareRounded";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
expand: {
|
||||
transform: "rotate(0deg)",
|
||||
marginLeft: "auto",
|
||||
transition: theme.transitions.create("transform", {
|
||||
duration: theme.transitions.duration.shortest
|
||||
})
|
||||
},
|
||||
expandOpen: {
|
||||
transform: "rotate(180deg)"
|
||||
},
|
||||
avatar: {
|
||||
backgroundColor: theme.palette.primary.main
|
||||
}
|
||||
}));
|
||||
|
||||
const ActiveSessionComponent = () => {
|
||||
const classes = useStyles();
|
||||
const [expanded, setExpanded] = React.useState(false);
|
||||
|
||||
const handleExpandClick = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
avatar={
|
||||
<Avatar aria-label="recipe" className={classes.avatar}>
|
||||
<ShareRoundedIcon />
|
||||
</Avatar>
|
||||
}
|
||||
action={
|
||||
<IconButton aria-label="settings">
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
}
|
||||
title={<strong>Active session</strong>}
|
||||
subheader="Expand to see forwards"
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="textSecondary" component="p">
|
||||
This impressive paella is a perfect party dish and a fun meal to cook
|
||||
together with your guests. Add 1 cup of frozen peas along with the
|
||||
mussels, if you like.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions disableSpacing>
|
||||
<IconButton aria-label="add to favorites">
|
||||
<FavoriteIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
className={clsx(classes.expand, {
|
||||
[classes.expandOpen]: expanded
|
||||
})}
|
||||
onClick={handleExpandClick}
|
||||
aria-expanded={expanded}
|
||||
aria-label="show more"
|
||||
>
|
||||
<ExpandMoreIcon />
|
||||
</IconButton>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActiveSessionComponent;
|
|
@ -13,6 +13,7 @@ import FavoriteIcon from "@material-ui/icons/Favorite";
|
|||
import ShareIcon from "@material-ui/icons/Share";
|
||||
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
||||
import MoreVertIcon from "@material-ui/icons/MoreVert";
|
||||
import DnsRoundedIcon from "@material-ui/icons/DnsRounded";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
expand: {
|
||||
|
@ -26,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
|
|||
transform: "rotate(180deg)"
|
||||
},
|
||||
avatar: {
|
||||
backgroundColor: "#F15B2A"
|
||||
backgroundColor: theme.palette.primary.main
|
||||
}
|
||||
}));
|
||||
|
||||
|
@ -43,7 +44,7 @@ const SystemComponent = () => {
|
|||
<CardHeader
|
||||
avatar={
|
||||
<Avatar aria-label="recipe" className={classes.avatar}>
|
||||
R
|
||||
<DnsRoundedIcon />
|
||||
</Avatar>
|
||||
}
|
||||
action={
|
||||
|
@ -51,8 +52,8 @@ const SystemComponent = () => {
|
|||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
}
|
||||
title="Shrimp and Chorizo Paella"
|
||||
subheader="September 14, 2016"
|
||||
title={<strong>Server</strong>}
|
||||
subheader="Host: StaWebSrv"
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="textSecondary" component="p">
|
||||
|
|
|
@ -4,6 +4,7 @@ import { bindActionCreators } from "redux";
|
|||
import PropTypes from "prop-types";
|
||||
import { loadSystemDateTime, loadSystemVersion } from "../actionCreators";
|
||||
import SystemComponent from "./SystemComponent";
|
||||
import ActiveSessionComponent from "./ActiveSessionComponent";
|
||||
|
||||
const SystemContainer = ({ actions }) => {
|
||||
useEffect(() => {
|
||||
|
@ -11,7 +12,14 @@ const SystemContainer = ({ actions }) => {
|
|||
actions.loadSystemVersion();
|
||||
}, []);
|
||||
|
||||
return <SystemComponent />;
|
||||
return (
|
||||
<>
|
||||
<SystemComponent />
|
||||
<br />
|
||||
<br />
|
||||
<ActiveSessionComponent />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
SystemContainer.propTypes = {
|
||||
|
|
Loading…
Reference in New Issue