123456789101112131415161718192021222324252627282930313233343536 |
- import { Avatar, Badge } from "@mui/material"
- import { backendURL } from "../../helpers/gql"
- import { SearchUserItemName, SearchUserItemWrapper, BadgeImgWrapper, AvatarWrapper } from "./SearchUserItem.style"
- import CheckBox from "./icons8_checkbox.svg";
- export const SearchUserItem = ({user, handleSetUser, invisible}) => {
- return (
- <SearchUserItemWrapper onClick={() => handleSetUser(user._id)}>
- <Badge
- sx={{margin: "0 20px"}}
- overlap="circular"
- anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
- invisible={!invisible}
- badgeContent={
- <BadgeImgWrapper>
- <img src={CheckBox}/>
- </BadgeImgWrapper>
- }
- >
- <AvatarWrapper checked={invisible}>
- <Avatar
- alt={user.nick}
- src={`${backendURL}/${user?.avatar?.url || ''}`}
- sx={{ width: "100%", height: "100%"}}
- />
- </AvatarWrapper>
-
- </Badge>
-
- <SearchUserItemName>
- {user.nick}
- </SearchUserItemName>
- </SearchUserItemWrapper>
- )
- }
|