@material-ui/core Avatar JavaScript Examples

Source File: Message.js From React-discord-clone with MIT License

6 votes

function Message({timestamp, user, message}) {
    return (
        <div className="message">
            <Avatar src={user.photo}/>
            <div className="message__info">
                <h4>
                    {user.displayName}
                    <span className="message__timestamp">
                        {new Date(timestamp?.toDate()).toUTCString()}
                    </span>
                </h4>

                <p>{message}</p>
            </div>
        </div>
    )
}

Source File: tipsLayout.js From resumeker-fe with MIT License

6 votes

function TipsLayout(props) {
    const classes = useStyles();

    return (
        <Grid item xs={false} sm={4} md={3} className={classes.image}>
            <Grid item className={classes.startText}>
                <Avatar className={classes.avatar}>
                    <DescriptionIcon />
                </Avatar>
                <Typography
                    component="h1"
                    variant="h5"
                    className={classes.spacing}
                >
                    Start Making Your Resume
                </Typography>
            </Grid>
            <Grid item className={classes.tips}>
                {props.tips}
            </Grid>
        </Grid>
    );
}

Source File: NavbarWithoutAuth.js From e-Pola with MIT License

6 votes

function NavbarWithoutAuth({ children, brandPath }) {
  const classes = useStyles()

  return (
    <AppBar position="static" className={classes.appBar}>
      <Toolbar>
        <Avatar
          className={classes.brandLogo}
          variant="square"
          src={logo}
          component={Link}
          to={brandPath || '/'}
        />
        <div className={classes.flex}>
          <ButtonGroup size="small" aria-label="small outlined button group">
            <Button onClick={changeLanguge('en')}>English</Button>
            <Button onClick={changeLanguge('si')}>සිංහල</Button>
            <Button onClick={changeLanguge('ta')}>தமிழ்</Button>
          </ButtonGroup>
        </div>
        {children}
      </Toolbar>
    </AppBar>
  )
}

Source File: index.js From Hacktoberfest-2020 with MIT License

6 votes

Home = ({ contributors }) => (
  <Layout>
    <Head />
    <Grid className={styles.welcomeGridWrapper} container>
      <Typography variant={"h1"} className={styles.welcomeText}>Let's change the world together with Open source!</Typography>
      <Typography variant={"h2"} className={styles.welcomeSubText}>Hacktoberfest is open to everyone whether you're new to development, a student or a long-time contributor. Open your first pull request and generate a personalized music certificate
      <a className={styles.githubLink} href="https://github.com/OpenSourceTogether/Hacktoberfest-2020" target="_blank">here</a>.
      </Typography>
    </Grid>
    <Grid container className={styles.arrowContainer}>
      <FallingDownArrow />
    </Grid>
    <Grid container className={styles.contributorsListContainer}>
      <Typography className={styles.contributorsTitle}>{Math.floor(contributors.length/100)*100}+ contributors:</Typography>
      <Typography className={styles.contributorsSubTitle}>Tip: ? Click on an username to view their personalized music certificate.</Typography>
      {
        contributors && contributors.map((item, index) => {
          return (
            <Link href="/contributors/[slug]" key={index} as={`/contributors/${item["github-username"]}`}>
              <Chip
                style={{
                  background: `${item["favourite-color"]}`
                }}
                className={styles.userName}
                classes={{ avatar: styles.chipAvatar }}
                avatar={<Avatar>{item["favourite-emoji"]}</Avatar>}
                label={item["github-username"]}
              />
            </Link>
          )
        })
      }
    </Grid>
  </Layout>
)

Source File: RankCard.js From dscbppimt-official-website with MIT License

6 votes

RankCard = () => {
    return(
        <ListItem> 
            <Card>
                <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            </Card>
        </ListItem>
    )
}

Source File: LoginButton.jsx From simplQ-frontend with GNU General Public License v3.0

6 votes

LoginButton = () => {
  const { user, isAuthenticated, logout, loginWithRedirect } = useAuth0();

  if (isAuthenticated) {
    return (
      <Button
        color="primary"
        onClick={() => logout({ returnTo: window.location.origin })}
        variant="outlined"
      >
        <Avatar id={styles.avatar} alt={user.name} src={user.picture} />
        &nbsp;&nbsp;Logout
      </Button>
    );
  }
  return (
    <Button color="primary" onClick={loginWithRedirect} variant="outlined">
      <Avatar id={styles.avatar} alt="user">
        {' '}
        <AccountCircleIcon />
      </Avatar>
      &nbsp;&nbsp;Login
    </Button>
  );
}

Source File: AvatarButtons.js From Athavani with MIT License

6 votes

export default function AvatarButtons(props) {
  const classes = useStyles();
  
  return (
    <>
      <Button onClick={props.onClick} variant={props.variant} color={props.color} className={clsx(classes.button,props.styling)} size={props.size} fullWidth={props.fullWidth} type={props.type}>
        <Avatar
          style={{
            color: props.color ,
            backgroundColor:"white"
          }}
          className={classes.avt}
        >
          <props.displayicon/>
        </Avatar>
        {props.children}
      </Button>
    </>
  );
}

Source File: SideBar.js From surveillance-forms with MIT License

6 votes

SideBarCard = ({ user, onLanguageSelect, lang, langCode }) => {
  const classes = useStyles();
  //TODO: this could be done better
  const fields = {
    label: lang.t("note.lable"),
    notes: [
      lang.t("note.note1"),
      lang.t("note.note2"),
      lang.t("note.note3"),
      lang.t("note.note4"),
    ],
  };

  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography variant="h6" component="h2">
          {fields.label}
        </Typography>
        <List>
          {fields.notes.map((el, index) => {
            return (
              <ListItem key={index} disableGutters>
                <ListItemAvatar style={{ flexShrink: 1 }}>
                  <Avatar style={{ background: '#fff', margin: 0 }}>
                    <CheckIcon style={{ fill: 'green', width: 20 }}/>
                  </Avatar>
                </ListItemAvatar>
                <ListItemText className="sidebarText">{el}</ListItemText>
              </ListItem>
            );
          })}
        </List>
      </CardContent>
    </Card>
  );
}

Source File: About.js From Dog-Book with MIT License

6 votes

About = () => {
  const classes = useStyle();
  return (
    <Container>
      <Typography variant="h4" className={classes.contributers} component="h2">
        Contributers
      </Typography>
      {data.contributers.map((contributer) => (
        <Card className={classes.root} elevation={4}>
          <CardContent className={classes.content}>
            <Avatar alt="avatar" src={contributer.avatar_url}></Avatar>
            <Typography variant="h5" className={classes.name}>
              {contributer.name}
            </Typography>
          </CardContent>
          <CardActions className={classes.actions}>
            <IconButton href={contributer.username}>
              <GitHub className={classes.avatar} />
            </IconButton>
          </CardActions>
        </Card>
      ))}
    </Container>
  );
}

Source File: ContributorAvatar.js From spells-fyi with MIT License

6 votes

ContributorAvatar = ({ contributor, large, children, tooltip, clickable, isUnhighlighted, props }) => {
    const classes = useStyles();

    let avatar = <Avatar src={contributor.avatar_url} className={`
      ${large ? classes.large : classes.small}
      ${isUnhighlighted && classes.unhighlighted}
      ${clickable && classes.clickable}
    `} {...props}>{children}</Avatar>
    return tooltip ? <Tooltip title={contributor.login} arrow>{avatar}</Tooltip> : avatar
}

Source File: Profile.js From clone-instagram-ui with MIT License

6 votes

Profile = ({ username }) => {
  const firstCharacter = username ? username[0].toUpperCase() : '';
  return (
    <Avatar
      className="profile-avatar"
      style={{ background: getBackgroundColor(firstCharacter) }}
    >
      {firstCharacter || '-'}
    </Avatar>
  );
}

Source File: index.js From whaticket with MIT License

6 votes

TicketHeaderSkeleton = () => {
	const classes = useStyles();

	return (
		<Card square className={classes.ticketHeader}>
			<CardHeader
				titleTypographyProps={{ noWrap: true }}
				subheaderTypographyProps={{ noWrap: true }}
				avatar={
					<Skeleton animation="wave" variant="circle">
						<Avatar alt="contact_image" />
					</Skeleton>
				}
				title={<Skeleton animation="wave" width={80} />}
				subheader={<Skeleton animation="wave" width={140} />}
			/>
		</Card>
	);
}

Source File: TotalProfit.js From EMP with MIT License

6 votes

TotalProfit = () => {
  const classes = useStyles();

  return (
    <Card>
      <CardContent>
        <Grid
          container
          justify="space-between"
          spacing={3}
        >
          <Grid item>
            <Typography
              color="textSecondary"
              gutterBottom
              variant="h6"
            >
              TOTAL PROFIT
            </Typography>
            <Typography
              color="textPrimary"
              variant="h3"
            >
              $23,200
            </Typography>
          </Grid>
          <Grid item>
            <Avatar className={classes.avatar}>
              <AttachMoneyIcon />
            </Avatar>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

Source File: MissionDetailsIconList.jsx From resilience-app with GNU General Public License v3.0

6 votes

MissionDetailsIconList = ({ contentItems, outerClass }) => {
  const classes = useStyles();
  return (
    <Grid container className={outerClass} alignItems="flex-start">
      {contentItems.map((contentItem, index) => {
        const Icon = contentItem.icon;
        const avatarImage = contentItem.avatar?.image;
        const content = contentItem.content.map((content, index) => {
          return (
            <Body2
              key={`content-item-txt-${index + 1}`}
              color="textPrimary"
              style={content.style}
              className={classes.contentTypography}
            >
              {content.text}
            </Body2>
          );
        });

        return (
          <React.Fragment key={`content-item-${index + 1}`}>
            <Grid item xs={1}>
              {Icon && <Icon color="primary" />}
              {avatarImage && (
                <Avatar className={classes.avatar} alt="Volunteer" src={avatarImage} />
              )}
            </Grid>
            <Grid item xs={11}>
              {content}
            </Grid>
          </React.Fragment>
        );
      })}
    </Grid>
  );
}

Source File: ToolbarExtension.js From eSim-Cloud with GNU General Public License v3.0

6 votes

export function ImageExportDialog (props) {
  const classes = useStyles()
  const { onClose, open } = props

  const handleClose = () => {
    onClose('')
  }

  const handleListItemClick = (value) => {
    onClose(value)
  }

  return (
    <Dialog onClose={handleClose} aria-labelledby="image-export-dialog-title" open={open}>
      <DialogTitle id="image-export-dialog-title">Select Image type</DialogTitle>
      <List>
        {ImgTypes.map((img) => (
          <ListItem button onClick={() => handleListItemClick(img)} key={img}>
            <ListItemAvatar>
              <Avatar className={classes.avatar}>
                {img.charAt(0).toUpperCase()}
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={img} />
          </ListItem>
        ))}
      </List>
      <DialogActions>
        <Button onClick={handleClose} color="primary" autoFocus>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  )
}

Source File: Profile.js From paper-and-ink with MIT License

6 votes

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

  const classes = useStyles();

  const user = {
    name: 'Simos',
    avatar: '/images/simos.jpeg',
    bio: 'Lead Developer'
  };

  return (
    <div {...rest} className={clsx(classes.root, className)}>
      <Avatar alt="Person" className={classes.avatar} component={Link} src={user.avatar} to="/" />
      <Typography className={classes.name} variant="h4">
        {user.name}
      </Typography>
      <Typography variant="body2">{user.bio}</Typography>
    </div>
  );
}

Source File: Profile.js From git-insights with MIT License

6 votes

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

  const classes = useStyles();

  return (
    !user
    ?
      <ProfileLoader/>
    :
    <div
      {...rest}
      className={clsx(classes.root, className)}
    >
      <Avatar
        alt="Person"
        className={classes.avatar}
        component={RouterLink}
        src={user.picture}
        to="/settings"
      />
      <Typography
        className={classes.name}
        variant="h4"
      >
        {`${user.firstName} ${user.lastName}`}
      </Typography>
      <Typography variant="body2">{user.location}</Typography>
    </div>
  );
}

Source File: Form.jsx From redive_linebot with MIT License

6 votes

DemoArea = ({ imageUrl = "", template = "" }) => {
  const demoData = { damage: 123456, display_name: "佑樹", boss_name: "要塞破壞者" };
  const classes = useStyles();
  const imageRegex = /^https?:\/\/(?:[a-z-]+\.)+[a-z]{2,6}(?:\/[^/#?]+)+\.(?:jpe?g|png)$/;
  const isValidImage = imageRegex.test(imageUrl);
  imageUrl = isValidImage ? imageUrl : "";

  return (
    <Grid
      container
      component={Paper}
      style={{ padding: "1rem" }}
      variant="outlined"
      className={classes.root}
      direction="column"
    >
      <Grid item>
        <Typography variant="h6">效果預覽</Typography>
      </Grid>
      <Grid container item alignItems="center" spacing={1}>
        <Grid item>
          <Avatar src={imageUrl} alt={"頭像"} />
        </Grid>
        <Grid item>
          <Typography variant="subtitle2">
            {template.replace(/{{.*?}}/gm, match => {
              const key = match.replace(/[{}]/g, "").trim();
              return demoData[key] || "";
            })}
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  );
}

Source File: ChatList.jsx From react-03.03 with MIT License

6 votes

ChatList = ({ chats, createChat }) => {
  const classes = useStyles();
  const [name, setName, setNameState] = useInput('');
  const handleAddChat = (event) => {
    event.preventDefault();
    createChat(name);
    setNameState('');
  }

  return (
    <List className={classes.root}>

      { chats.map(({id, name}) => {
          return (
            <Link key={id} to={`/chats/${id}`}>
              <ListItem className={classes.listItem}>
                <ListItemAvatar>
                  <Avatar />
                </ListItemAvatar>
                <ListItemText
                  primary={name}
                />
              </ListItem>
            </Link>
          )
        })
      }
      <ListItem className={classes.listItem}>
        <form onSubmit={handleAddChat}>
          <input type="text" placeholder="Chat name" value={name} onChange={setName} />
          <button>Create chat</button>
        </form>
      </ListItem>
    </List>
  )
}

Source File: Header.js From AED-Map with MIT License

6 votes

Header = () => {
  const classes = useStyles();

  return (
    <>
      <Avatar className={classes.avatar}>
        <LockOutlined />
      </Avatar>
      <Typography component="h1" variant="h5">
        Відновити пароль
      </Typography>
    </>
  );
}

Source File: Profile.js From willow-grandstack with Apache License 2.0

6 votes

Profile = () => {
  const { user, isAuthenticated } = useAuth0()

  return (
    isAuthenticated && (
      <Paper style={{ padding: '20px' }}>
        <Avatar src={user.picture} alt={user.name}></Avatar>
        <Typography>{user.name}</Typography>
        <Typography>{user.email}</Typography>
      </Paper>
    )
  )
}

Source File: index.js From hacktoberfest-mumbai with MIT License

6 votes

Home = ({ contributors }) => (
  <Layout>
    <Head />
    <Grid className={styles.welcomeGridWrapper} container>
      <Typography variant={"h1"} className={styles.welcomeText}>Let's change the world together with Open source!</Typography>
      <Typography variant={"h2"} className={styles.welcomeSubText}>Hacktoberfest is open to everyone whether you're new to development, a student or a long-time contributor. Open your first pull request and generate a personalized certificate
      <a className={styles.githubLink} href="https://github.com/parikshitgupta1/hacktoberfest-mumbai" target="_blank">here</a>.
      </Typography>
    </Grid>
    <Grid container className={styles.arrowContainer}>
      <FallingDownArrow />
    </Grid>
    <Grid container className={styles.contributorsListContainer}>
      <Typography className={styles.contributorsTitle}>Open source contributors:</Typography>
      <Typography className={styles.contributorsSubTitle}>? Click on the username below to view their personalized certificate.?</Typography>
      {
        contributors && contributors.map((item, index) => {
          return (
            <Link href="/contributors/[slug]" key={index} as={`/contributors/${item["github-username"]}`}>
              <Chip
                style={{
                  background: `${item["favourite-color"]}`
                }}
                className={styles.userName}
                classes={{ avatar: styles.chipAvatar }}
                avatar={<Avatar>{item["favourite-emoji"]}</Avatar>}
                label={item["github-username"]}
              />
            </Link>
          )
        })
      }
    </Grid>
  </Layout>
)

Source File: LoginPage.js From plataforma-sabia with MIT License

6 votes

LoginPage = () => {
	const classes = useStyles();
	const login = useLogin();
	const notify = useNotify();
	const submit = ({ email, password }) => {
		login({ email, password }).catch(() => notify('Invalid email or password'));
	};
	return (
		<Container component="main" maxWidth="xs">
			<CssBaseline />
			<div className={classes.paper}>
				<Avatar className={classes.avatar}>
					<LockOutlinedIcon />
				</Avatar>
				<Typography component="h1" variant="h5">
					Entrar na Plataforma
				</Typography>
				<Form fields={['email', 'password']} onSubmit={submit} buttonLabel="Entrar" />
				<Grid container>
					<Grid item xs>
						<Link to="/auth/forgot-password">Esqueceu a senha?</Link>
					</Grid>
				</Grid>
				<Notification />
			</div>
			<Box mt={8}>
				<Copyright />
			</Box>
		</Container>
	);
}

Source File: WebChatListHeader.js From WhatsApp-Clone with MIT License

6 votes

WebChatListHeader = ({ onChatClick, onStatusClick }) => {
  const styles = useStyles();

  return (
    <div className={styles.parentView}>
      <div style={{ width: "20%", marginLeft: "4%", alignSelf: "center" }}>
        <Avatar src={USER} className={styles.profileIcon} />
      </div>
      <div
        style={{
          width: "40%",
          flexDirection: "row",
          justifyContent: "space-evenly"
        }}
      />
      <div
        style={{
          width: "40%",
          display: "flex",
          flexDirection: "row"
        }}
      >
        <img onClick={onStatusClick} className={styles.menuIcons} src={STATUS} />
        <Chat onClick={onChatClick} className={styles.chatIcons} />
        {/* <img src={CHAT} className={styles.chatIcons} /> */}
        <MoreVert className={styles.menuIcons} />
      </div>
    </div>
  );
}

Source File: UserAvatar.js From dipact with GNU General Public License v3.0

6 votes

render() {
		return (
			<React.Fragment>
				<IconButton
					style={{
						padding: "0px",
					}}
					onClick={(_) => {
						if (this.props.user.Id) {
							this.setState({ dialogOpen: true });
						}
					}}
				>
					<Avatar
						alt={this.props.user.Name}
						src={this.props.user.Picture}
						style={{ marginRight: "16px" }}
					/>
				</IconButton>
				{this.state.dialogOpen ? (
					<StatsDialog
						game={this.props.game}
						onClose={(ev) => {
							if (ev) {
								ev.stopPropagation();
								ev.preventDefault();
							}
							this.setState({ dialogOpen: false });
						}}
						user={this.props.user}
						gameState={this.props.gameState}
						onNewGameState={this.props.onNewGameState}
					/>
				) : (
					""
				)}
			</React.Fragment>
		);
	}

Source File: PublicComments.js From app with MIT License

5 votes

function CommentList({ requestId }) {
  const classes = useStyles();
  const firestore = useFirestore();

  const querySnapshot = useFirestoreCollection(
    firestore
      .collection(`${REQUESTS_COMMENTS_PUBLIC_COLLECTION}`)
      .where('requestId', '==', requestId)
      .orderBy('createdAt', 'asc'),
  );

  if (querySnapshot.empty) {
    return (
      <Box color="text.disabled">
        <Typography
          variant="body2"
          className={classes.noComments}
          data-test="no-comments">
          No public comments.
        </Typography>
      </Box>
    );
  }

  return (
    <List>
      {querySnapshot.docs.map(
        (docSnap) =>
          // When new comment is added locally, the createdAt can be the serverTimestamp() value.
          // So, we wait on rendering until any new snapshot has finished writing.
          !docSnap.metadata.hasPendingWrites && (
            <ListItem
              key={docSnap.id}
              divider
              alignItems="flex-start"
              data-test="public-comment">
              <ListItemAvatar>
                <Avatar>{docSnap.get('author.firstName').slice(0, 1)}</Avatar>
              </ListItemAvatar>
              <ListItemText
                disableTypography
                primary={
                  <Typography variant="subtitle2" data-test="comment-author">
                    {docSnap.get('author.firstName')} &ndash;{' '}
                    <Typography
                      variant="body2"
                      display="inline"
                      color="textSecondary">
                      {format(docSnap.get('createdAt').toDate(), 'p - PPPP')}
                    </Typography>
                  </Typography>
                }
                secondary={docSnap
                  .get('content')
                  .split('\n')
                  .map((content, key) => (
                    <Typography
                      variant="body1"
                      /* eslint-disable react/no-array-index-key */
                      key={key}
                      /* eslint-enable react/no-array-index-key */
                      gutterBottom
                      data-test="comment-content">
                      {content}
                    </Typography>
                  ))}
              />
            </ListItem>
          ),
      )}
    </List>
  );
}

Source File: AccountEditor.js From e-Pola with MIT License

5 votes

function AccountEditor() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showSuccess, showError } = useNotifications()

  // Get profile from redux state
  const profile = useSelector(({ firebase }) => firebase.profile)

  if (!isLoaded(profile)) {
    return <LoadingSpinner />
  }

  function updateAccount(newAccount) {
    return firebase
      .updateProfile(newAccount)
      .then(() => showSuccess('Profile updated successfully'))
      .catch((error) => {
        console.error('Error updating profile', error.message || error) // eslint-disable-line no-console
        showError('Error updating profile: ', error.message || error)
        return Promise.reject(error)
      })
  }

  return (
    <Grid container spacing={2} justify="center">
      <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>
        <Avatar
          className={classes.avatarCurrent}
          alt="DP image"
          src={(profile && profile.avatarUrl) || defaultUserImageUrl}
        />
        <div className={classes.linkedAccounts}>
          <Typography variant="h6" color="secondary">
            Linked Accounts
          </Typography>
          {!!profile && !!profile.providerData && (
            <ProviderDataForm providerData={profile.providerData} />
          )}
        </div>
      </Grid>
      <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>
        <AccountForm onSubmit={updateAccount} account={profile} />
      </Grid>
    </Grid>
  )
}

Source File: Chats.js From React-Messenger-App with MIT License

5 votes

function Chats({ addChat, id, name }) {

  const [messages, setmessages] = useState("");


  useEffect(() => {
    if (id) {
      database
        .collection("rooms")
        .doc(id)
        .collection("messages")
        .orderBy("timestamp", "desc")
        .onSnapshot((snapshot) =>
          setmessages(snapshot.docs.map((doc) => doc.data()))
        );
    }
  }, [id]);

  const addnewChat = () => {
    const chatName = prompt("Enter A name");

    if (chatName) {
      database.collection("rooms").add({
        name: chatName,
      });
    }
  };

  return !addChat ? (
    <Link to={`/rooms/${id}`}>
      <div className="chats">
        <Avatar alt={name} src="/" />
        <div className="chats__info">
          <h3>{name}</h3>
          <p>{messages[0]?.message}</p>
        </div>
      </div>
    </Link>
  ) : (
    <div onClick={addnewChat} className="chats">
      <h2>Add New Chat</h2>
    </div>
  );
}

Source File: Inbox.js From treetracker-admin-client with GNU Affero General Public License v3.0

5 votes

Inbox = ({ threads, selected, handleListItemClick }) => {
  const { paper, searchInbox, list, listItem, listText, avatar } = useStyles();
  const [search, setSearch] = useState('');

  return (
    <Paper className={paper}>
      <List className={list}>
        {threads
          .filter((thread) => {
            if (search === '') {
              return thread;
            } else if (
              thread.userName.toLowerCase().includes(search.toLowerCase())
            ) {
              return thread;
            }
          })
          .map((thread, i) => (
            <ListItem
              key={`${thread.userName}-${i}`}
              alignItems="flex-start"
              className={listItem}
              selected={thread.userName === selected}
              onClick={() => handleListItemClick(thread.userName)}
            >
              <ListItemAvatar>
                {thread.messages[0].type === 'message' ? (
                  <Avatar src={thread.avatar} className={avatar}></Avatar>
                ) : thread.messages[0].type === 'announce' ? (
                  <Announcement color="inherit" />
                ) : (
                  <Ballot color="inherit" />
                )}
              </ListItemAvatar>
              {thread.messages[0].type === 'survey' ||
              thread.messages[0].type === 'announce' ? (
                <ListItemText
                  primary={thread.messages[0].subject}
                  secondary={
                    thread.messages[0].subject
                      ? thread.messages[0].composed_at.slice(0, 10)
                      : thread.userName
                  }
                  className={listText}
                />
              ) : (
                <ListItemText primary={thread.userName} className={listText} />
              )}
              <Typography>
                {timeAgoFormatDate(
                  new Date(
                    thread.messages[thread.messages.length - 1].composed_at
                  )
                )}
              </Typography>
            </ListItem>
          ))}
      </List>
      <SearchInbox className={searchInbox} setSearch={setSearch} />
    </Paper>
  );
}

@material-ui/core#Avatar JavaScript Examples