74 lines
2.0 KiB
React
74 lines
2.0 KiB
React
import { Avatar as MuiAvatar } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
import { useSelector } from "react-redux";
|
|
import { useEffect, useState } from "react";
|
|
import { useTheme } from "@emotion/react";
|
|
/**
|
|
* @component
|
|
* @param {Object} props
|
|
* @param {string} props.src - Path to image for avatar
|
|
* @param {boolean} props.small - Specifies if avatar should be large
|
|
* @param {Object} [props.sx] - Additional styles to apply to the button.
|
|
* @returns {JSX.Element}
|
|
* @example
|
|
* // Render a red label
|
|
* <Avatar src="assets/img" first="Alex" last="Holliday" small />
|
|
*/
|
|
|
|
const Avatar = ({ src, small, sx, onClick = () => {} }) => {
|
|
const { user } = useSelector((state) => state.auth);
|
|
const theme = useTheme();
|
|
|
|
const style = small ? { width: 32, height: 32 } : { width: 64, height: 64 };
|
|
const border = small ? 1 : 3;
|
|
|
|
const [image, setImage] = useState();
|
|
useEffect(() => {
|
|
if (user.avatarImage) {
|
|
setImage(`data:image/png;base64,${user.avatarImage}`);
|
|
}
|
|
}, [user?.avatarImage]);
|
|
|
|
return (
|
|
<MuiAvatar
|
|
onClick={onClick}
|
|
alt={`${user?.firstName} ${user?.lastName}`}
|
|
/* TODO What is the /static/images/avatar/2.jpg ?*/
|
|
src={src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"}
|
|
sx={{
|
|
fontSize: small ? "16px" : "22px",
|
|
fontWeight: 400,
|
|
color: theme.palette.accent.contrastText,
|
|
backgroundColor: theme.palette.accent.main, // Same BG color as checkmate BG in sidebar
|
|
display: "inline-flex",
|
|
/*
|
|
TODO not sure what this is for*/
|
|
"&::before": {
|
|
content: `""`,
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: `100%`,
|
|
height: `100%`,
|
|
border: `${border}px solid rgba(255,255,255,0.2)`,
|
|
borderRadius: "50%",
|
|
},
|
|
...style,
|
|
...sx,
|
|
}}
|
|
>
|
|
{user.firstName?.charAt(0)}
|
|
{user.lastName?.charAt(0) || ""}
|
|
</MuiAvatar>
|
|
);
|
|
};
|
|
|
|
Avatar.propTypes = {
|
|
src: PropTypes.string,
|
|
small: PropTypes.bool,
|
|
sx: PropTypes.object,
|
|
onClick: PropTypes.func,
|
|
};
|
|
|
|
export default Avatar;
|