components ProfilePicture.tsx

100% Statements 5/5

66.66% Branches 2/3

100% Functions 3/3

100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43  
 
 
 
 
 
 
 
 
 
 
 
608x
608x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26x
2396x
608x
 
 
 
 
 
 
 
 
 
 
  import useUserReducer from "@hooks/Reducers/useUserReducer";
 
import { Avatar, styled } from "@mui/material";
import { StyledIconButton } from "@common/IconButton";
import { IStyleIconButtonProps } from "@common/IconButton/IconButton";
import { addSizeToImage } from "@components/UploadAvatar/UploadAvatar";
 
function ProfilePicture(
  props: Omit<IStyleIconButtonProps, "children"> & {
    pointerEventsNone?: boolean | undefined;
  },
) {
  const { img } = useUserReducer();
  return (
    <StyledProfileButton
      {...props}
      pointerEventsNone={Boolean(props?.pointerEventsNone)}
      data-testid="profile-btn"
    >
      <Avatar
        src={addSizeToImage(img, "thumb")}
        sx={{ width: "32px", height: "32px" }}
      />
    </StyledProfileButton>
  );
}
 
export default ProfilePicture;
 
const StyledProfileButton = styled(StyledIconButton, {
  shouldForwardProp: (prop) => prop !== "pointerEventsNone",
})(({ pointerEventsNone = false }: { pointerEventsNone: boolean }) => ({
  borderRadius: "50%",
  pointerEvents: pointerEventsNone ? "none" : "auto",
  border: "3px solid transparent",
  padding: "0 !important",
  height: "fit-content !important",
  width: "fit-content !important",
  "&:hover": {
    borderColor: `#B8B8B8`,
  },
}));