@material-ui/core#Avatar TypeScript Examples

ConnectWallet: React.FC = () => {
  const { connect } = useTezos();

  return (
    <PageContainer container justify="flex-start" alignItems="center">
      <Grid item>
        <SpacingTitle align="left" variant="h3" color="textSecondary">
          Connect your wallet
        </SpacingTitle>
        <SpacingTitle align="left" variant="subtitle1" color="textSecondary">
          Create an organization by picking a template below
        </SpacingTitle>
        <Box>
          <List>
            <ListItem button={true} onClick={() => connect()}>
              <ListItemAvatar>
                <Avatar>
                  <ImageIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText>
                <Typography variant="subtitle1" color="textSecondary">
                  {" "}
                  Connect
                </Typography>{" "}
              </ListItemText>
            </ListItem>
          </List>
        </Box>
      </Grid>
    </PageContainer>
  );
}

_ControlsSyncProfileGoogle: FunctionComponent<ControlsSyncProfileGoogleProps> = ({
  googleAuthProfile,
}) => {
  const classes = useStyles();

  // Don't display if not logged in.
  if (googleAuthProfile == null) return null;

  return (
    <Box display="flex" flexDirection="column">
      <Box display="flex" flexDirection="row">
        <Avatar alt={googleAuthProfile.name} src={googleAuthProfile.imageUrl} />
        <Box display="flex" className={classes.profileWelcome} flexDirection="column">
          <Typography variant="h5">
            {f('map-ui:welcome-format', { user: googleAuthProfile.givenName })}
          </Typography>
          <Typography variant="subtitle2">{googleAuthProfile.email}</Typography>
        </Box>
      </Box>

      <Box display="flex" flexDirection="row">
        <Typography className={classes.centerVertical} variant="body2">
          {t('map-ui:google-login-success')}
        </Typography>
        <Tooltip title={t('core:sign-out')}>
          <IconButton className={classes.logoutButton} onClick={attemptGoogleSignOut}>
            <LogoutIcon />
          </IconButton>
        </Tooltip>
      </Box>
    </Box>
  );
}

AuthorView = ({ author, date }: { author: Author; date?: string }) => {
  const classes = useStyles();
  return (
    <div className={classes.author}>
      {author.profilePicUrl ? (
        <CardHeader
          avatar={<Avatar aria-label={author.name} src={author.profilePicUrl} />}
          title={author.name}
          subheader={date ? convertToReadableDate(date) : ''}
        />
      ) : (
        <CardHeader
          avatar={<FirstLetter text={author.name} />}
          title={author.name}
          subheader={date ? convertToReadableDate(date) : ''}
        />
      )}
    </div>
  );
}

SourceInfo = ({ build }: { build: CITableBuildInfo }) => {
  const classes = useStyles();
  const { user, source } = build;

  return (
    <Box display="flex" alignItems="center" className={classes.root}>
      <Avatar alt={user.name} src={user.avatarUrl} className={classes.small} />
      <Box>
        <Typography variant="button">{source?.branchName}</Typography>
        <Typography variant="body1">
          {source?.commit?.url !== undefined ? (
            <Link to={source?.commit?.url}>{source?.commit.shortHash}</Link>
          ) : (
            source?.commit.shortHash
          )}
        </Typography>
      </Box>
    </Box>
  );
}

withBasicUsage = (): StoryFnReactReturnType => {
    const value = text('Avatar.value', 'AB');
    const avatar = <Avatar>{value}</Avatar>;
    return (
        <UserMenu
            avatar={avatar}
            menuGroups={[
                {
                    items: [
                        {
                            title: 'Settings',
                            icon: <Settings />,
                            onClick: action("click 'Settings'"),
                        },
                        {
                            title: 'Contact Us',
                            icon: <Email />,
                            onClick: action("click 'Contact Us'"),
                        },
                        {
                            title: 'Log Out',
                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,
                            onClick: action("click 'Log Out'"),
                        },
                    ],
                },
            ]}
            onOpen={action('open')}
            onClose={action('close')}
        />
    );
}

ProfileCard = (props: Props) => {
  const [selection, setSelection] = useState(false);

  const handleSelect = () => {
    props.onClick(props.index, props.repository);
    setSelection(props.selections.has(props.index));
  };

  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            {props.shortName}
          </Avatar>
        }
        action={<IconButton aria-label="settings" />}
        title={props.title}
        subheader={props.repository.replace('https://github.com/', '')}
      />
      <CardContent>
        <Typography variant="body2" color="textSecondary" component="p">
          {props.description}
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <IconButton aria-label="select" onClick={handleSelect}>
          {selection ? (
            <CheckBoxIcon color="primary" />
          ) : (
            <CheckBoxOutlineBlankIcon />
          )}
        </IconButton>
      </CardActions>
    </Card>
  );
}

ReviewListItem: FC<any> = props => {
    const { data, onClick } = props;
    const classes = useStyles();
    const { content } = data;

    if (!content) {
        return null;
    }

    return (
        <ListItem
            button
            component={SearchListItemLink}
            data={data}
            onClick={onClick}
            alignItems="flex-start"
        >
            <ListItemAvatar className={classes.avatar}>
                <Avatar alt={content.reference}>
                    <CommentIcon fontSize="large" />
                </Avatar>
            </ListItemAvatar>
            <ListItemText
                primary={<Rating value={content.rating} readOnly />}
                secondary={<ReviewComment comment={content.comment} />}
                // @ts-ignore Could not make TS happy
                secondaryTypographyProps={secondaryTypographyProps}
            />
        </ListItem>
    );
}

AvatarOption = ({ option }: Props) => {
  return (
    <>
      <Avatar
        css={css`
          height: 1.5rem;
          width: 1.5rem;
        `}
        alt={option.avatar?.name}
        src={option.avatar?.photo}
      />
      <Username>{option.username}</Username>
    </>
  );
}

UserAvatar: React.FC<UserAvatarProps> = ({ user }: UserAvatarProps) => {
    // Credit: https://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
    let hash = 0, i, chr;
    for (i = 0; i < user.name.length; i++) {
        chr = user.name.charCodeAt(i);
        hash = ((hash << 5) - hash) + chr;
        hash |= 0;
    }
    const background = chroma.hsl(Math.abs(hash) % 360, 0.7, 0.6).hex().substr(1);
    return (
        <Avatar alt={user.name}
                src={`https://eu.ui-avatars.com/api/?name=${user.name}&size=128&color=ffffff&background=${background}`}/>
    );
}

Profile = (props) => {
  const { className, ...rest } = props;

  const classes = useStyles();

  const user = {
    name: 'Shen Zhi',
    avatar: '/images/avatars/avatar_11.png',
    bio: 'Brain Director',
  };

  return (
    <div
      {...rest}
      className={clsx(classes.root, className)}
    >
      <Link href="/settings">
        <Avatar
          alt="Person"
          className={classes.avatar}
          src={user.avatar}
        />
      </Link>

      <Typography
        className={classes.name}
        variant="h4"
      >
        {user.name}
      </Typography>
      <Typography variant="body2">{user.bio}</Typography>
    </div>
  );
}

BinaryStateListItem = ({
  active,
  children
}: BinaryStateListItemProps): ReactElement => {
  return (
    <Grid container spacing={3}>
      <Grid item style={{ margin: 'auto' }}>
        <Avatar>
          {active ? (
            <Check titleAccess="Eligible" />
          ) : (
            <Close titleAccess="Ineligible" />
          )}
        </Avatar>
      </Grid>
      <Grid item xs zeroMinWidth>
        {children}
      </Grid>
    </Grid>
  )
}

MessageDialog = () => {
    const { messageState, resolveMessage } = useAppState();
    const classes = useStyles();
    return (
        <>
            {messageState.messageActive && (
                <>
                    <Dialog open={messageState.messageActive} onClose={resolveMessage}>
                        {messageState.messageType === "Info" ? (
                            <Avatar className={classes.avatarForInformation}>
                                <Info />
                            </Avatar>
                        ) : (
                            <Avatar className={classes.avatarForException}>
                                <ErrorOutline />
                            </Avatar>
                        )}
                        <DialogTitle>{messageState.messageTitle}</DialogTitle>
                        <DialogContent>
                            {messageState.messageDetail.map((d, i) => {
                                return <DialogContentText key={i}>{d}</DialogContentText>;
                            })}
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={resolveMessage} color="primary">
                                OK
                            </Button>
                        </DialogActions>
                    </Dialog>
                </>
            )}
        </>
    );
}

SmallAvatar = withStyles((theme: Theme) =>
  createStyles({
    root: {
      width: 22,
      height: 22,
      border: `2px solid ${theme.palette.background.paper}`,
    },
  })
)(Avatar)

export default function User({ value }: IHeavyCellProps) {
  if (!value || !value.displayName || !value.timestamp) return null;
  const dateLabel = format(
    value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
    DATE_TIME_FORMAT
  );

  return (
    <Tooltip title={dateLabel}>
      <Chip
        avatar={<Avatar alt="Avatar" src={value.photoURL} />}
        label={value.displayName}
      />
    </Tooltip>
  );
}

Player = ({ player, isHost, isCzar, onPlayerKick, isCurrentUserHost }: any) => {
  function renderIcon() {
    return <div style={!isCzar ? { opacity: 0 } : {}}>
      <ListItemAvatar>
        <Avatar>
          <StyleIcon />
        </Avatar>
      </ListItemAvatar>
    </div>
  }

  function renderKick() {
    if (isHost || !isCurrentUserHost) {
      return null;
    }

    return <ListItemSecondaryAction style={{ right: '-10px' }}>
      <Button color="secondary" onClick={() => { onPlayerKick(player?._id) }}>Kick</Button>
    </ListItemSecondaryAction>
  }

  return <ListItem>
    {renderIcon()}
    <ListItemText primary={player.username} secondary={`Score: ${!player?.score ? 0 : player.score}`} />
    {renderKick()}
  </ListItem>;
}

CommandListItem: FC<any> = props => {
    const { data, onClick } = props;
    const { content } = data;

    const classes = useCommandListItemStyles();
    const translate = useTranslate();

    if (!content) {
        return null;
    }

    return (
        <ListItem
            button
            component={SearchListItemLink}
            data={data}
            onClick={onClick}
            alignItems="flex-start"
        >
            <ListItemAvatar className={classes.avatar}>
                <Avatar alt={content.reference}>
                    <ShoppingCartIcon fontSize="large" />
                </Avatar>
            </ListItemAvatar>
            <Grid className={classes.root} container spacing={2}>
                <Grid container item xs>
                    <Grid item xs={8}>
                        <Typography
                            variant="body1"
                            color="textPrimary"
                            gutterBottom
                        >
                            Ref. {content.reference}
                        </Typography>
                    </Grid>
                    <Grid item xs={4}>
                        <CommandStatus status={content.status} />
                    </Grid>
                    <Grid item xs={12}>
                        <Typography
                            variant="body2"
                            color="textPrimary"
                            gutterBottom
                        >
                            {new Date(content.date).toLocaleDateString()}
                            &nbsp;-&nbsp;
                            {`${content.customer.first_name} ${content.customer.last_name}`}
                            &nbsp;-&nbsp;
                            {`${translate(
                                'resources.commands.fields.basket.total'
                            )} ${content.total}`}
                            €
                        </Typography>
                    </Grid>
                </Grid>
            </Grid>
        </ListItem>
    );
}

TransactionItem: React.FC<TransactionProps> = ({ transaction }) => {
  const classes = useStyles();
  const history = useHistory();

  const showTransactionDetail = (transactionId: string) => {
    history.push(`/transaction/${transactionId}`);
  };

  return (
    <ListItem
      data-test={`transaction-item-${transaction.id}`}
      alignItems="flex-start"
      onClick={() => showTransactionDetail(transaction.id)}
    >
      <Paper className={classes.paper} elevation={0}>
        <Grid container spacing={2}>
          <Grid item>
            <ListItemAvatar>
              <Badge
                overlap="circle"
                anchorOrigin={{
                  vertical: "bottom",
                  horizontal: "right",
                }}
                badgeContent={<SmallAvatar src={transaction.receiverAvatar} />}
              >
                <Avatar src={transaction.senderAvatar} />
              </Badge>
            </ListItemAvatar>
          </Grid>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
                <TransactionTitle transaction={transaction} />
                <Typography variant="body2" color="textSecondary" gutterBottom>
                  {transaction.description}
                </Typography>
                <Grid
                  container
                  direction="row"
                  justify="flex-start"
                  alignItems="flex-start"
                  spacing={1}
                  className={classes.socialStats}
                >
                  <Grid item>
                    <LikeIcon className={classes.countIcons} />
                  </Grid>
                  <Grid item>
                    <Typography data-test="transaction-like-count" className={classes.countText}>
                      {transaction.likes.length}
                    </Typography>
                  </Grid>
                  <Grid item>
                    <CommentIcon className={classes.countIcons} />
                  </Grid>
                  <Grid item>
                    <Typography data-test="transaction-comment-count" className={classes.countText}>
                      {transaction.comments.length}
                    </Typography>
                  </Grid>
                </Grid>
              </Grid>
            </Grid>
            <Grid item>
              <TransactionAmount transaction={transaction} />
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </ListItem>
  );
}

withMenuPlacementOptions = (): StoryFnReactReturnType => {
    const anchorOriginHorizontal = select(
        'MenuProps.anchorOrigin.horizontal',
        ['left', 'center', 'right'],
        'left',
        'Menu'
    );
    const anchorOriginVertical = select('MenuProps.anchorOrigin.vertical', ['top', 'center', 'bottom'], 'top', 'Menu');
    const transformOriginHorizontal = select(
        'MenuProps.transformOrigin.horizontal',
        ['left', 'center', 'right'],
        'left',
        'Menu'
    );
    const transformOriginVertical = select(
        'MenuProps.transformOrigin.vertical',
        ['top', 'center', 'bottom'],
        'top',
        'Menu'
    );

    return (
        <UserMenu
            avatar={<Avatar>CD</Avatar>}
            menuGroups={[
                {
                    items: [
                        {
                            title: 'Settings',
                            icon: <Settings />,
                            onClick: action("click 'Settings'"),
                        },
                        {
                            title: 'Contact Us',
                            icon: <Email />,
                            onClick: action("click 'Contact Us'"),
                        },
                        {
                            title: 'Log Out',
                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,
                            onClick: action("click 'Log Out'"),
                        },
                    ],
                },
            ]}
            MenuProps={{
                anchorOrigin: { horizontal: anchorOriginHorizontal, vertical: anchorOriginVertical },
                transformOrigin: { horizontal: transformOriginHorizontal, vertical: transformOriginVertical },
            }}
            onOpen={action('open')}
            onClose={action('close')}
        />
    );
}

export default function User({ control, column }: ISideDrawerFieldProps) {
  const classes = useStyles();
  const fieldClasses = useFieldStyles();

  return (
    <Controller
      control={control}
      name={column.key}
      render={({ value }) => {
        if (!value || !value.displayName || !value.timestamp)
          return <div className={fieldClasses.root} />;
        const dateLabel = format(
          value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
          DATE_TIME_FORMAT
        );
        return (
          <Grid
            container
            alignItems="center"
            className={clsx(fieldClasses.root, classes.labelContainer)}
          >
            <Grid item>
              <Avatar
                alt="Avatar"
                src={value.photoURL}
                className={classes.avatar}
              />
            </Grid>
            <Grid item>
              <Typography variant="body2">
                {value.displayName} ({value.email})
              </Typography>
              <Typography variant="body2" color="textSecondary">
                {dateLabel}
              </Typography>
            </Grid>
          </Grid>
        );
      }}
    />
  );
}

StyledAvatar = styled(Avatar)(({ size }: { size?: number }) => ({
  width: size || 40,
  height: size || 40,
}))

function UserActions({ logOut, userActionsVisible, toggleUserActions }: Props) {
  const user = useSelector(selectUser)
  const dispatch = useDispatch()
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget)
  }
  const handleMenu = () => {
    setAnchorEl(null)
    if (user) dispatch(logOut)
    else window.location.href = "/#login"
  }

  return (
    <>
      <IconButton
        data-name={"menuButton"}
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        {user ? (
          <Avatar src={user._json.avatar_url} alt="User Avatar" />
        ) : (
          <AccountCircle />
        )}
      </IconButton>

      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleMenu}
      >
        <MenuItem data-name={"loginLogout"} onClick={handleMenu}>
          {user ? "Logout" : "Login"}
        </MenuItem>
      </Menu>
    </>
  )
}

ProviderInfo = ({ order }: { order: Order }) => {
	const theme = useTheme()
	const history = useHistory()
	const [provider, isLoading] = useDocumentListen<Provider>(Provider, Provider.collectionReference().doc(order.providedBy))

	if (isLoading) {
		return (
			<Paper>
				<DataLoading />
			</Paper>
		)
	}

	if (!provider) {
		return (
			<></>
		)
	}

	return (
		<Box padding={2} onClick={() => history.push(`/providers/${provider.id}`)}>
			<Grid container wrap="nowrap" spacing={2}>
				<Grid item>
					<Avatar variant="rounded" src={provider.coverImageURL()} alt={provider.name} style={{
						height: theme.spacing(8),
						width: theme.spacing(8)
					}}>
						<ImageIcon />
					</Avatar>
				</Grid>
				<Grid item xs zeroMinWidth>
					<Typography variant="subtitle1" gutterBottom>{provider.name}</Typography>
					<Typography variant="body1" color="textSecondary">{provider.caption}</Typography>
					<Divider style={{
						marginTop: theme.spacing(1),
						marginBottom: theme.spacing(1),
					}} />
					<Typography variant="body2" color="textSecondary">{provider.description}</Typography>
				</Grid>
			</Grid>
		</Box>
	)
}

NewCustomers = (): ReactElement => {
    const translate = useTranslate();
    const classes = useStyles();
    const aMonthAgo = useMemo(() => {
        const date = new Date();
        date.setDate(date.getDate() - 30);
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date;
    }, []);

    const { loaded, data: visitors } = useQueryWithStore({
        type: 'getList',
        resource: 'customers',
        payload: {
            filter: {
                has_ordered: true,
                first_seen_gte: aMonthAgo.toISOString(),
            },
            sort: { field: 'first_seen', order: 'DESC' },
            pagination: { page: 1, perPage: 100 },
        },
    });

    if (!loaded) {
        return <Loading />;
    }
    return (
        <Card className={classes.root}>
            <CardHeader title={translate('pos.dashboard.new_customers')} />
            <List>
                {visitors
                    ? visitors.map((record: Customer) => (
                          <ListItem
                              button
                              to={`/customers/${record.id}`}
                              component={Link}
                              key={record.id}
                          >
                              <ListItemAvatar>
                                  <Avatar src={`${record.avatar}?size=32x32`} />
                              </ListItemAvatar>
                              <ListItemText
                                  primary={`${record.first_name} ${record.last_name}`}
                              />
                          </ListItem>
                      ))
                    : null}
            </List>
        </Card>
    );
}

ListItem = ({ data }: { data: Order }) => {
	const classes = useStyles();
	const { orderID } = useParams<{ orderID?: string }>()
	const salesMethod = useSalesMethod()
	const orderedDate = Dayjs(data.createdAt.toDate())
	const currency = data.currency
	const amount = data.amount || 0
	const price = new Intl.NumberFormat("ja-JP", { style: "currency", currency: currency }).format(amount)
	const imageURL = data.imageURLs().length > 0 ? data.imageURLs()[0] : undefined

	return (
		<Link className={classes.list} to={`/admin/orders/${data.id}` + (salesMethod ? `?salesMethod=${salesMethod}` : "")}>
			<Box>
				<Box padding={1} paddingY={2} style={{
					backgroundColor: orderID === data.id ? "rgba(0, 0, 140, 0.03)" : "inherit"
				}}>
					<Grid container>
						<Grid item xs={1}>
						</Grid>
						<Grid item xs={2}>
							<Avatar variant="rounded" src={imageURL} >
								<ImageIcon />
							</Avatar>
						</Grid>
						<Grid item xs={9}>
							<Box display="flex" justifyContent="space-between">
								<Box>
									<Typography variant="subtitle1">{data.title}</Typography>
									<Typography variant="body2">{data.id}</Typography>
									<Typography variant="caption">
										{orderedDate.format("YYYY-MM-DD HH:mm:ss")}
									</Typography>
								</Box>
							</Box>
							<Box className={classes.tags}>
								<Chip size="small" label={DeliveryStatusLabel[data.deliveryStatus]} />
								<Chip size="small" label={SalesMethodLabel[data.salesMethod]} />
								<Chip size="small" label={PaymentStatusLabel[data.paymentStatus]} />
								{
									data.tags.map((tag, index) => {
										return <Chip key={index} size="small" label={tag} />
									})
								}
							</Box>
						</Grid>
					</Grid>
				</Box>
				<Divider />
			</Box>
		</Link>
	)
}

OrderEvent: FC<{ record?: RaRecord; basePath?: string }> = ({
    record,
    basePath,
}) => {
    const translate = useTranslate();
    const classes = useEventStyles();

    if (!record) {
        return null;
    }

    return (
        <Card className={classes.card}>
            <CardHeader
                className={classes.cardHeader}
                avatar={
                    <Avatar
                        aria-label={translate('resources.commands.name', {
                            smart_count: 1,
                        })}
                    >
                        <order.icon />
                    </Avatar>
                }
                action={<EditButton record={record} basePath="/commands" />}
                title={`${translate('resources.commands.name', {
                    smart_count: 1,
                })} #${record.reference}`}
                subheader={
                    <>
                        <Typography variant="body2">{record.date}</Typography>
                        <Typography variant="body2" color="textSecondary">
                            {translate('resources.commands.nb_items', {
                                smart_count: record.basket.length,
                                _: '1 item |||| %{smart_count} items',
                            })}
                            &nbsp;-&nbsp;
                            <NumberField
                                source="total"
                                options={{
                                    style: 'currency',
                                    currency: 'USD',
                                }}
                                record={record}
                                basePath={basePath}
                            />
                            &nbsp;-&nbsp;
                            <TextField
                                source="status"
                                record={record}
                                basePath={basePath}
                            />
                        </Typography>
                    </>
                }
            />
        </Card>
    );
}

Notification = () => {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  const notifications: Notification[] = [
    {
      title: "a",
      subtitle: "a",
      variant: "error",
      link:
        "https://console.cloud.google.com/cloud-build/builds;region=global/f7b8fd9b-eb6e-401f-a889-73c4bf75f232?project=antler-vc",
    },
  ];

  const notificationsCount = notifications.length;
  return (
    <>
      <IconButton onClick={handleClick}>
        <Badge
          color={"primary"}
          variant="standard"
          badgeContent={notificationsCount}
        >
          <BellIcon />
        </Badge>
      </IconButton>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center",
        }}
      >
        <List>
          {notifications.map((notification) => (
            <ListItem>
              <ListItemAvatar>
                <Avatar>
                  <ErrorIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText
                primary={notification.title}
                secondary={notification.subtitle}
              />
              <ListItemSecondaryAction>
                <IconButton edge="end" aria-label="delete">
                  <DeleteIcon />
                </IconButton>
              </ListItemSecondaryAction>
            </ListItem>
          ))}
        </List>
      </Popover>
    </>
  );
}

MemberAvatar = ({ member }: Props) => {
  return (
    <Avatar css={avatarStyles} src={member?.avatar?.photo} alt="member-avatar">
      {member?.username?.charAt(0) || "-"}
    </Avatar>
  );
}

CartItemCell = ({ cartGroup, cartItem }: { cartGroup: CartGroup, cartItem: CartItem }) => {

	const classes = useStyles()
	const [user] = useUser()
	const [cart] = useCart()

	const addItem = async (event) => {
		event.preventDefault()
		event.stopPropagation()
		if (user) {
			if (cart) {
				const group = cart.cartGroup(cartGroup.groupID)
				group?.addItem(cartItem)
				await cart.save()
			} else {
				const cart = new Cart(user.id)
				const group = cart.cartGroup(cartGroup.groupID)
				group?.addItem(cartItem)
				await cart.save()
			}
		}
	}

	const deleteItem = async (event) => {
		event.preventDefault()
		event.stopPropagation()
		if (!cart) return
		const group = cart.cartGroup(cartGroup.groupID)
		group?.subtractItem(cartItem)
		if ((group?.items.length || 0) <= 0) {
			cart.groups = cart.groups.filter(group => group.groupID !== cartGroup.groupID)
		}
		await cart.save()
	}

	const imageURL = (cartItem.imageURLs().length > 0) ? cartItem.imageURLs()[0] : undefined
	const price = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartItem.currency }).format(cartItem.price())
	const subtotal = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartItem.currency }).format(cartItem.subtotal())

	return (
		<Box display="flex" padding={2}>
			<Box>
				<Avatar className={classes.avater} variant="rounded" src={imageURL}>
					<ImageIcon />
				</Avatar>
			</Box>
			<Box flexGrow={1}>
				<Box display="flex" justifyContent="space-between" flexGrow={1}>
					<Box mx={2}>
						<Typography variant="subtitle1">{cartItem.name}</Typography>
						<Typography variant="body1" color="textSecondary">{cartItem.caption}</Typography>
						<Typography variant="body1" color="textSecondary">{price}</Typography>
					</Box>
					<Box>
						<Box display="flex" justifyContent="flex-end" fontSize={16} fontWeight={500} >
							{subtotal}
						</Box>
						<Box display="flex" justifyContent="flex-end" alignItems="center" mx={0} my={0}>
							<Tooltip title="Remove">
								<IconButton onClick={deleteItem}>
									<RemoveCircleIcon color="inherit" />
								</IconButton>
							</Tooltip>
							<Box fontWeight={600} fontSize={16} mx={1}>
								{cartItem.quantity}
							</Box>
							<Tooltip title="Add">
								<IconButton onClick={addItem}>
									<AddCircleIcon color="inherit" />
								</IconButton>
							</Tooltip>
						</Box>
					</Box>
				</Box>
			</Box>
		</Box>
	)
}

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