You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

67 lines
1.5 KiB

import React from "react";
import Badge from "@material-ui/core/Badge";
import Avatar from "@material-ui/core/Avatar";
import { makeStyles, withStyles } from "@material-ui/core/styles";
const StyledBadge = withStyles((theme) => ({
badge: {
backgroundColor: "#44b700",
color: "#44b700",
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
"&::after": {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "50%",
animation: "$ripple 1.2s infinite ease-in-out",
border: "1px solid currentColor",
content: '""',
},
},
"@keyframes ripple": {
"0%": {
transform: "scale(.8)",
opacity: 1,
},
"100%": {
transform: "scale(2.4)",
opacity: 0,
},
},
}))(Badge);
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
"& > *": {
margin: 0,
},
},
}));
export default function StatusAvatar(props) {
const classes = useStyles();
return (
<div className={classes.root}>
{props.status ? (
<StyledBadge
overlap="circle"
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
variant="dot"
>
<Avatar style={{ width : 90, height :90}} alt="Remy Sharp" src={props.src} />
</StyledBadge>
) : (
<StyledBadge>
<Avatar style={{ width : 90, height :90}} alt="Remy Sharp" src={props.src} />
</StyledBadge>
)}
</div>
);
}