@material-ui/icons#GitHub JavaScript Examples

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

DialogDisplay = ({ person: { name, designation, phoneNumber, emailId, githubProfile, linkedinProfile } }) => {
    const classes = teamMemberStyles();
    const [open, setOpen] = useState(false);
    return (
        <div className={`${classes.tilebar} ${classes.tilebarRootTitle} ${classes.tilebarBottom}`}>
            <div className={`${classes.titlePosRight} ${classes.titleWrap}`}>
                <div className={classes.title}>{name}</div>
                <div><span>{designation}</span></div>
            </div>
            <CardActions onClick={() => setOpen(true)} className={classes.actionItem}><Info /></CardActions>
            <Dialog
                aria-labelledby="simple-dialog-title"
                aria-describedby="simple-dialog-description"
                open={open}
                onClose={() => { setOpen(false) }}
            >
                <DialogContent style={{minWidth:'38vh',minHeight:'25vh'}}>
                    {name ? <DialogContentText className={classes.dialogHeading}>{name}</DialogContentText> : null}
                    {phoneNumber ? <DialogContentText className={classes.dialogContent}><LocalPhone className={classes.icon}/> {phoneNumber}</DialogContentText> : null}
                    {emailId ? <DialogContentText className={classes.dialogContent}><Mail className={classes.icon}/> {emailId}</DialogContentText> : null}
                    {githubProfile ? <a href={githubProfile} alt={"githubProfile"} ><GitHub className={classes.githubIcon} /></a> : null}
                    {linkedinProfile ? <a href={linkedinProfile} alt={"linkedinProfile"}><LinkedIn className={classes.linkedinIcon} /></a> : null}
                </DialogContent>
            </Dialog>
        </div>
    )
}

footerItems = [
  {
    title: 'Find us on Maps',
    icons: [
      {
        title: 'Maps',
        icon: <Map />,
        route: 'https://goo.gl/maps/KbMkmqUWmUVQpfCv9',
      },
    ],
  },
  {
    title: 'Contact us',
    icons: [
      {
        title: 'Email',
        icon: <Email />,
        route: 'mailto:[email protected]',
      },
      {
        title: 'Phone',
        icon: <LocalPhone />,
        route: 'tel: 040-2304-2760',
      },
    ],
  },
  {
    title: 'Follow us',
    icons: [
      {
        title: 'Github',
        icon: <GitHub />,
        route: 'https://github.com/turinghut',
      },
      {
        title: 'instagram',
        icon: <Instagram />,
        route: 'https://www.instagram.com/turing.hut/',
      },
    ],
  },
]

function Status ({ className }) {
  const watcherConnection = useSelector(selectConnection);
  const byzantineChain = useSelector(selectByzantine);
  const isSynced = useSelector(selectIsSynced);

  const renderNoConnection = (
    <Tooltip title='Currently cannot connect to the Watcher. Either the Watcher is not operational or there is a connection issue. Please wait while we retry the connection.'>
      <div className={styles.indicator}>
        <div
          className={[
            styles.statusCircle,
            styles.unhealthy
          ].join(' ')}
        />
        <span className={styles.unhealthyText}>
          No Connection
        </span>
      </div>
    </Tooltip>
  );

  const renderChainHealth = (
    <Tooltip
      title={
        byzantineChain
          ? 'An unhealthy status will result from byzantine conditions on the network. Users should not transact on the network until the byzantine conditions are cleared.'
          : 'A healthy status means there are no byzantine conditions on the network.'}
    >
      <div className={styles.indicator}>
        <div
          className={[
            styles.statusCircle,
            byzantineChain ? styles.unhealthy : styles.healthy
          ].join(' ')}
        />
        <span
          className={
            byzantineChain
              ? styles.unhealthyText
              : styles.healthyText
          }
        >
          {byzantineChain ? 'Unhealthy' : 'Healthy'}
        </span>
      </div>
    </Tooltip>
  );

  const renderWatcherStatus = (
    <Tooltip
      title={
        isSynced
          ? 'Watcher is caught up with the current child chain blocks'
          : 'Watcher syncing status indicates that the Watcher is still catching up with the most recent child chain blocks. Transaction status will be delayed so users should wait until the Watcher is fully synced.'}
    >
      <div className={styles.indicator}>
        <div
          className={[
            styles.statusCircle,
            isSynced ? styles.healthy : '',
            !isSynced ? styles.unhealthy : ''
          ].join(' ')}
        />
        <span
          className={
            isSynced
              ? styles.healthyText
              : styles.unhealthyText
          }
        >
          {isSynced ? 'Connected' : 'Syncing'}
        </span>
      </div>
    </Tooltip>
  );

  return (
    <div
      className={[
        styles.Status,
        className
      ].join(' ')}
    >
      <div>
        <Info
          data={[
            {
              title: 'Watcher Status',
              value: watcherConnection ? renderWatcherStatus : renderNoConnection
            },
            {
              title: 'Network Status',
              value: watcherConnection ? renderChainHealth : ''
            },
            {
              title: 'Environment',
              value: getShortNetworkName()
            },
            {
              header: 'Plasma Framework Address',
              title: truncate(networkService.plasmaContractAddress, 6, 4, '...'),
              value: <Copy value={networkService.plasmaContractAddress} />
            },
            {
              header: 'Watcher URL',
              title: config.watcherUrl,
              value: <Copy value={config.watcherUrl} />
            },
            {
              header: 'Block Explorer',
              title: config.blockExplorerUrl,
              value: (
                <a
                  href={config.blockExplorerUrl}
                  target='_blank'
                  rel='noopener noreferrer'
                  className={styles.icon}
                >
                  <Dvr />
                </a>
              )
            }
          ]}
        />
      </div>
      <div>
        <a
          href='https://github.com/omgnetwork/web-wallet'
          target='_blank'
          rel='noopener noreferrer'
          className={styles.github}
        >
          <GitHub />
        </a>
      </div>
    </div>
  );
}

function ResponsiveDrawer(props) {
  const { window, darkState, handleThemeChange } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [selectedIndex, setSelectedIndex] = React.useState(-1);

  const handleDrawerToggle = (value) => {
    if (value === false) {
      setMobileOpen(false);
    } else {
      setMobileOpen(true);
    }
  };

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };

  const drawer = (
    <div>
      <div style={{ padding: "0.5rem" }}>
        <Link to="/" onClick={() => handleDrawerToggle(false)}>
          <Typography variant="h5">
            Playground{" "}
            <span role="img" aria-label="playground">
              ?
            </span>
          </Typography>
        </Link>
      </div>
      <List>
        {Components_Index.map((elm, index) => (
          <Link
            key={elm.name}
            to={elm.path}
            onClick={() => handleDrawerToggle(false)}
          >
            <ListItem
              button
              key={elm.name}
              selected={selectedIndex === index}
              onClick={(event) => handleListItemClick(event, index)}
              className={classes.sideListItem}
            >
              <ListItemText primary={elm.name} />
            </ListItem>
          </Link>
        ))}
      </List>
    </div>
  );

  const container =
    window !== undefined ? () => window().document.body : undefined;

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            className={classes.menuButton}
          >
            <MenuIcon />
          </IconButton>
          <Link to="/">
            <Typography variant="h6" noWrap>
              React Native Elements
            </Typography>
          </Link>
          <div style={{ marginLeft: "auto" }}>
            <IconButton style={{ color: "white" }} onClick={handleThemeChange}>
              {darkState ? <WbSunnyIcon /> : <Brightness2Icon />}
            </IconButton>
            <a
              href="https://reactnativeelements.com/"
              target="_blank"
              rel="noopener noreferrer"
            >
              <Button color="inherit">Docs</Button>
            </a>
            <IconButton
              color="inherit"
              rel="noopener noreferrer"
              href="https://github.com/react-native-elements/react-native-elements"
              target="_blank"
            >
              <GitHub />
            </IconButton>
          </div>
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer} aria-label="mailbox folders">
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            anchor={theme.direction === "rtl" ? "right" : "left"}
            open={mobileOpen}
            onClose={() => handleDrawerToggle(false)}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper,
            }}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <Container maxWidth="lg">
          <Navigation />
        </Container>
      </main>
    </div>
  );
}