@material-ui/lab#AvatarGroup TypeScript Examples

The following examples show how to use @material-ui/lab#AvatarGroup. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Task.tsx    From knboard with MIT License 5 votes vote down vote up 
TaskFooter = ({ task }: { task: ITask }) => {
  const membersByIds = useSelector(selectMembersEntities);
  const assignees = task.assignees.map(
    (assigneeId) => membersByIds[assigneeId]
  ) as BoardMember[];

  return (
    <Footer>
      <CardIcon data-testid="task-priority">
        <FontAwesomeIcon icon={faArrowUp} color={PRIO_COLORS[task.priority]} />
      </CardIcon>
      {assignees.length > 0 && (
        <Assignees>
          <AvatarGroup
            max={3}
            css={css`
              & .MuiAvatarGroup-avatar {
                height: 1.25rem;
                width: 1.25rem;
                font-size: 8px;
                margin-left: -4px;
                border: none;
              }
            `}
          >
            {assignees.map((assignee) => (
              <Avatar
                key={assignee.id}
                css={css`
                  height: 1.25rem;
                  width: 1.25rem;
                  font-size: 8px;
                  margin-left: -12px;
                `}
                src={assignee.avatar?.photo}
                alt={assignee.avatar?.name}
              >
                {assignee.username.charAt(0)}
              </Avatar>
            ))}
          </AvatarGroup>
        </Assignees>
      )}
    </Footer>
  );
}
Example #2
Source File: index.tsx    From uno-game with MIT License 4 votes vote down vote up 
GameCard: React.FC<GameCardProps> = (props) => {
	const { name, status, players, gameId, maxPlayers, mode } = props

	const classes = useStyles()
	const customClasses = useCustomStyles({})

	const [linkCopied, setLinkCopied] = useState(false)

	const buttonText = statusButtonTextMap[status]
	const buttonColor = statusColorMap[status]
	const remainingSlots = maxPlayers - (players?.length ?? 0)

	const handleCopyRoomUrl = (event: React.MouseEvent) => {
		event.preventDefault()

		const roomUrl = ShareUtil.mountGameShareUrl(gameId)

		copy(roomUrl)

		setLinkCopied(true)

		setTimeout(() => {
			setLinkCopied(false)
		}, 1500)
	}

	return (
		<Grid
			container
			className={classes.container}
			style={{
				background: `linear-gradient(26.73deg, #252525 46.63%, rgba(37, 37, 37, 0.85) 98.21%), url(${unoWallpaperImage})`,
			}}
		>
			<Grid
				container
				direction="column"
			>
				<Typography
					variant="h3"
					className={`${classes.gameTitle} ${customClasses.limitedName}`}
				>
					{name}
				</Typography>

				<Typography
					variant="h2"
					className={classes.gameSubTitle}
				>
					#{gameId}
				</Typography>
			</Grid>

			<Divider orientation="horizontal" size={4} />

			{mode === "info" && (
				<>
					<Grid container>
						<InfoIcon
							className={classes.infoIcon}
						/>

						<Divider orientation="vertical" size={1} />

						<Grid
							container
							direction="column"
							className={classes.infoContainer}
						>
							<Typography
								variant="caption"
								className={classes.infoText}
							>
								At least 2 players are needed to start a game.
							</Typography>

							<Typography
								variant="caption"
								className={classes.infoText}
							>
								The game automatically starts when all players are ready.
							</Typography>
						</Grid>
					</Grid>

					<Divider orientation="horizontal" size={2} />
				</>
			)}

			<Grid
				container
				alignItems="flex-end"
				justify="space-between"
			>
				<Button
					className={classes.button}
					{...(mode === "info" ? { onClick: handleCopyRoomUrl } : {})}
					style={{
						backgroundColor: buttonColor,
					}}
				>
					{mode === "info" ? (
						linkCopied ? "COPIED!" : "COPY LINK"
					) : (
						buttonText
					)}
				</Button>

				<Grid item>
					<Typography
						variant="h2"
						className={classes.remainingSlotText}
					>
						{remainingSlots} {remainingSlots === 1 ? "SLOT" : "SLOTS"} LEFT
					</Typography>

					<Divider orientation="horizontal" size={1} />

					<AvatarGroup max={maxPlayers}>
						{players?.map(player => (
							<MaterialAvatar
								variant="circle"
								key={player.id}
								className={classes.avatar}
							>
								<Avatar
									name={player.name}
									size="small"
								/>
							</MaterialAvatar>
						))}
						{[...new Array(remainingSlots || 0)].map((_, index) => (
							<MaterialAvatar
								key={index}
								className={classes.avatar}
							/>
						))}
					</AvatarGroup>
				</Grid>
			</Grid>
		</Grid>
	)
}
Example #3
Source File: BoardBar.tsx    From knboard with MIT License 4 votes vote down vote up 
BoardBar = () => {
  const dispatch = useDispatch();
  const members = useSelector(selectAllMembers);
  const error = useSelector((state: RootState) => state.board.detailError);
  const detail = useSelector((state: RootState) => state.board.detail);
  const boardOwner = useSelector(currentBoardOwner);
  const { id } = useParams();
  const detailDataExists = detail?.id.toString() === id;

  if (!detailDataExists || error || !detail) {
    return null;
  }

  const handleAddColumn = () => {
    dispatch(addColumn(detail.id));
  };

  const handleEditLabels = () => {
    dispatch(setDialogOpen(true));
  };

  return (
    <Container data-testid="board">
      <Items>
        <Left>
          <BoardName
            id={detail.id}
            name={detail.name}
            isOwner={boardOwner}
            data-testid="board-name"
          />
          <AvatarGroup
            max={3}
            data-testid="member-group"
            css={css`
              margin-left: 1.5rem;
              & .MuiAvatarGroup-avatar {
                ${avatarStyles}
                border: none;
              }
              &:hover {
                cursor: pointer;
              }
            `}
            onClick={(e: any) => {
              if (e.target.classList.contains("MuiAvatarGroup-avatar")) {
                dispatch(setMemberListOpen(true));
              }
            }}
          >
            {members.map((member) => (
              <MemberDetail
                key={member.id}
                member={member}
                isOwner={detail.owner === member.id}
              />
            ))}
          </AvatarGroup>
          {boardOwner && <MemberInvite boardId={detail.id} />}
          <MemberFilter boardId={detail.id} />
        </Left>
        <Right>
          <Button
            size="small"
            css={css`
              ${buttonStyles}
              margin-right: 0.5rem;
              font-weight: 600;
            `}
            onClick={handleEditLabels}
            startIcon={<FontAwesomeIcon icon={faPen} />}
            data-testid="open-labels-dialog"
          >
            Edit labels
          </Button>
          <Button
            size="small"
            css={css`
              ${buttonStyles}
              font-weight: 600;
            `}
            onClick={handleAddColumn}
            startIcon={<FontAwesomeIcon icon={faPlus} />}
            data-testid="add-col"
          >
            Add Column
          </Button>
        </Right>
      </Items>
      <MemberDialog board={detail} />
      <MemberListDialog />
      <EditTaskDialog />
      <CreateTaskDialog />
      <LabelDialog />
    </Container>
  );
}