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
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> |
|
); |
|
}
|
|
|