@material-ui/core#Link JavaScript Examples

export default function NavBar() {
  const classes = useStyles();

  // const preventDefault = (event) => event.preventDefault();
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Connect 4
          </Typography>

          <div>
            <Link
              href="https://github.com/BhavyaCodes/connect-4-online-multiplayer"
              target="_blank"
              rel="noopener noreferrer"
              color="inherit"
            >
              <IconButton
                aria-label="Github repository link"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                color="inherit"
              >
                <GitHubIcon />
              </IconButton>
            </Link>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default function MyEventDetails() {
  const classes = useStyles();
  // Retrieves ID of current event from parameters
  const { eventId } = useParams();
  // Retrieves logged in user info from Auth0
  const { user } = useAuth0();
  // Retrieves event details of specified event by ID which user is registered to
  const { loading, error, data, refetch } = useQuery(GET_EVENT_DETAILS, {
    variables: { id: eventId, email: user.email },
  });
  useEffect(() => {
    refetch();
  }, [refetch]);
  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;

  const activeEvent = data.events;

  return (
    <main className={classes.root}>
      <Box className={classes.headingBox} borderBottom={2}>
        <Link href="/myevents" className={classes.linkBack}>
          <ArrowBackIosIcon color="primary" fontSize="large" />
          Back to my events
        </Link>
        <Typography variant="h1" gutterBottom>
          Event Details
        </Typography>
      </Box>
      {activeEvent &&
        activeEvent.map((event, id) => <EventDetails key={id} event={event} />)}
    </main>
  );
}

// TODO add once we get it :)
function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

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

  const socialItems = Resume.basics.profiles.map((socialItem) => (
    <Link
      href={socialItem.url}
      key={socialItem.network.toLowerCase()}
      target='_blank'
      rel='noopener noreferrer'
      underline='none'
      color='inherit'
    >
      <Tooltip
        title={socialItem.username}
        placement='left'
        TransitionComponent={Zoom}
      >
        <IconButton
          color='inherit'
          aria-label={socialItem.network}
          className={classes.iconButton}
        >
          <i className={`${classes.icon} ${socialItem.x_icon}`}></i>
        </IconButton>
      </Tooltip>
    </Link>
  ));

  return <div className={classes.socialIcons}>{socialItems}</div>;
}

HospitalCard = ({ hospitalNeeds }) => {
  const classes = useStyles()

  const [showDialog, setShowDialog] = useState(false)

  const handleContactClicked = () => {
    setShowDialog(true)
  }

  const handleDialogClosing = () => {
    setShowDialog(false)
  }

  return (
    <>
      <MakersForm open={showDialog} onClose={handleDialogClosing}
        hospitalNeeds={hospitalNeeds}/>
      <Grid item key={hospitalNeeds.hospital.name} xs={6} sm={3} md={3} lg={3} xl={3}>
        <Card className={classes.card} >
          <CardContent className={classes.cardContent} align="left">
            <Box fontWeight="fontWeightBold">
              <Typography align="left">
                {hospitalNeeds.hospital.name}
              </Typography> </Box>
            <HospitalNeed need={{ quantity: hospitalNeeds.quantity, productsName: hospitalNeeds.product.name }}/>
            <Link onClick={handleContactClicked}>Contact</Link>
          </CardContent>
        </Card>
      </Grid>
    </>
  )
}

render() {
    const { id, name, style, noLink } = this.props;

    if (!name) {
      return <Skeleton variant="text" style={{ display: 'inline-block', marginLeft: 4, width: 80 }} />;
    }

    if (noLink) {
      return (
        <Typography component="span" style={style}>
          {name}
        </Typography>
      );
    }

    return (
      <DoodadTooltip doodadId={id} disabled={!name}>
        <Link className="inline-link" style={style}>
          {name}
        </Link>
      </DoodadTooltip>
    );
  }

function NewsItem({ news }) {
  const { image, title, description, postedAt } = news;

  return (
    <Stack direction="row" alignItems="center" spacing={2}>
      <Box
        component="img"
        alt={title}
        src={image}
        sx={{ width: 48, height: 48, borderRadius: 1.5 }}
      />
      <Box sx={{ minWidth: 240 }}>
        <Link to="#" color="inherit" underline="hover" component={RouterLink}>
          <Typography variant="subtitle2" noWrap>
            {title}
          </Typography>
        </Link>
        <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
          {description}
        </Typography>
      </Box>
      <Typography variant="caption" sx={{ pr: 3, flexShrink: 0, color: 'text.secondary' }}>
        {formatDistance(postedAt, new Date())}
      </Typography>
    </Stack>
  );
}

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

  const classes = useStyles();

  return (
    <div
      {...rest}
      className={clsx(classes.root, className)}
    >
      <Typography variant="body1">
        &copy;{' '}
        <Link
          component="a"
          href="https://telar.dev/"
          target="_blank"
        >
          Telar
        </Link>
        . 2019
      </Typography>
      <Typography variant="caption">
        © Red Gold All Rights Reserved
      </Typography>
    </div>
  );
}

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

    const { loading, error, data } = useQuery(repository(), {
        context: { clientName: "github" }
    });
    if (error) console.log(error)
    if (error || !data)
        return (<Fragment></Fragment>)

    return (
        <Grid container className={classes.subtitle}>
            <Grid item xs={12}>
                <Typography variant="h6" color="textSecondary" paragraph align="center">Our contributors:</Typography>
            </Grid>
            <Grid item xs={12}>
                <Grid container direction="row" justify="center" spacing={2}>
                    {loading ? <CircularProgress align="center" /> : <Fragment />}
                    {data && [...new Map([...data.contributors_subgraph, ...data.contributors_fyi].filter(o => { return o.login != "dependabot[bot]" }).map(o => [o.login, o])).values()].map(edge =>

                        <Grid item key={edge.login}>
                            <Link href={"https://github.com/" + edge.login}>

                                <ContributorAvatar
                                    tooltip
                                    clickable
                                    contributor={edge}
                                />
                            </Link>
                        </Grid>
                    )}

                </Grid>
            </Grid>
        </Grid>
    )
}

DontBreakOutLink = styled(Link)`
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
`

BreadCrumbs = ({ crumbs, active }) => {
    return (
        <Fragment>
            <Breadcrumbs separator={<NavigateNext fontSize="small" />}>
                {crumbs.map((item, index) => {
                    return (
                        <Link
                            component={RouterLink}
                            color="inherit"
                            to={item.link}
                            key={index}
                        >
                            {item.name}
                        </Link>
                    );
                })}
                <Typography color="textPrimary">{active}</Typography>
            </Breadcrumbs>
        </Fragment>
    );
}

Breadcrumbs = props => {
  const {
    history,
    location: { pathname }
  } = props;
  const pathnames = pathname.split("/").filter(x => x);
  return (
    <Breadcrumbs aria-label="breadcrumb">
      {pathnames.length > 0 ? (
        <Link onClick={() => history.push("/dashboard")}>Dashboard</Link>
      ) : (
        <Typography> Dashboard </Typography>
      )}
      {pathnames.map((name, index) => {
        const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
        const isLast = index === pathnames.length - 1;
        return isLast ? (
          <Typography key={name}>{name}</Typography>
        ) : (
          <Link key={name} onClick={() => history.push(routeTo)}>
            {name}
          </Link>
        );
      })}
    </Breadcrumbs>
  );
}

Localizer = () => {
  const { i18n } = useTranslation();
  const classes = useStyles();
  const [defaultLang, setDefaultLang] = useLocalStorage("i18n");

  // First mount effect
  useEffect(() => {
    i18n.changeLanguage(defaultLang);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return useMemo(
    () => (
      <Box mx={["0%", "10%", "25%"]}>
        <Breadcrumbs
          classes={classes}
          maxItems={list.length}
          component="div"
          aria-label="languages"
        >
          {list.map(([tag, name]) => (
            <Link
              key={tag}
              href="#"
              onClick={() => {
                i18n.changeLanguage(tag);
                setDefaultLang(tag);
              }}
            >
              {name}
            </Link>
          ))}
        </Breadcrumbs>
      </Box>
    ),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );
}

export default function Footer() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Divider />
      <Typography className={classes.copyright} variant="body1">
        &copy; George Simos. 2020
      </Typography>
      <Typography variant="caption">
        Made with <span style={{ color: 'rgb(253, 57, 107)' }}>&hearts;</span> |{' '}
        <Link href="http://georgesimos.com/" target="_blank" rel="noopener">
          George Simos
        </Link>
      </Typography>
    </div>
  );
}

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

  const classes = useStyles();

  return (
    <div
      {...rest}
      className={clsx(classes.root, className)}
    >
      <Typography variant="body1">
        &copy;{' '}
        <Link
          component="a"
          href="#"
          target="_blank"
        >
          Git Insights
        </Link>
        . 2020
      </Typography>
    </div>
  );
}

function Copyright() {
  return (
    <Typography variant="body2" align="center">
      {"Copyright © "}
      <Link color="inherit" href="https://github.com/hitgo00/yasn">
        YASN
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

LinkWithIcon = ({ label, href, icon: Icon }) => {
  const classes = useStyles();

  return (
    <Link
      className={classes.root}
      target="_top"
      rel="noopener noreferrer"
      href={href}
    >
      <IconButton
        className={classes.iconButton}
        color="primary"
        size="small"
        disableRipple
      >
        <Icon />
        <Typography className={classes.label} noWrap>
          {label}
        </Typography>
      </IconButton>
    </Link>
  );
}

function Footer() {
  const classes = useStyles();

  return (
    <div className={classes.footer}>
      <Typography variant='body1' align='center'>
        Made with{' '}
        <Link color='textPrimary' href='https://gatsbyjs.com'>
          Gatsby
        </Link>{' '}
        <span role='img' aria-label='heart'>
          ?
        </span>
        , Deployed on{' '}
        <Link color='textPrimary' href='https://pages.github.com/'>
          GitHub Pages
        </Link>{' '}
        <span role='img' aria-label='rocket'>
          ?
        </span>
      </Typography>
      <Typography variant='body1' align='center'>
        Thank you for supporting the Open-Source community!{' '}
        <span role='img' aria-label='smile'>
          ?
        </span>
      </Typography>
      <Typography variant='body1' align='center' color='textPrimary'>
        iamdarshshah &copy; 2020
      </Typography>
    </div>
  );
}

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" className="footer-text">
      {"Copyright © "}
      <Link href="/">News Aggregator</Link> {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

OftadehBreadcrumbs = props => {
  const { path } = props;
  const classes = useStyles();

  const pathName = path.location.pathname.split("/");
  const lastRoute = pathName.splice(-1, 1);

  return (
    <div className={classes.root}>
      <Breadcrumbs aria-label="breadcrumb">
        {pathName.length > 1 &&
          pathName.map((item, index) => (
            <Link
              key={index}
              component={NavLinkAdapter}
              to={pathName.join("/")}
              activeClassName="active"
              exact={true}
              color="inherit"
            >
              {item === "" ? "dashboard" : item}
            </Link>
          ))}
        <Typography color="textPrimary">{lastRoute.toString()}</Typography>
      </Breadcrumbs>
    </div>
  );
}

export default function Footer(props) {
    const classes = useStyles();

    return (
        <footer className={classes.footer}>
            <Typography variant="h6" align="center" gutterBottom>
                With <span role="img" aria-label="heart">❤️</span> from <Link color="inherit" href="https://xprilion.com">
                    Monish Basaniwal
            </Link>
            </Typography>
        </footer>
    );
}

Star = () => {
  const { t } = useTranslation('star');
  return (
    <Grid container spacing={2}>
      <Grid item container spacing={1}>
        <Grid item>
          <StyledTitle>{t('title')}</StyledTitle>
        </Grid>
        <Grid item>
          <div>{t('description')}</div>
        </Grid>
      </Grid>
      <Grid item container spacing={1} alignItems="center">
        <Grid item>
          <GitHubIcon />
        </Grid>
        <Grid item>
          <Link href={GITHUB_URL} target="_blank" rel="noopener">
            {t('github')}
          </Link>
        </Grid>
      </Grid>
    </Grid>
  );
}

RequiredConformation = () => {
  const classes = UseStyle();
  return (
    <div className={classes.root}>
      <Layout>
        <Grid container justify="center" spacing={4}>
          <Grid item lg={6} xs={12}>
            <div className={classes.content}>
              <Typography variant="h1">
                Your verification is pending from College.
              </Typography>
            </div>
          </Grid>
          <Grid item xs={12} style={{ textAlign: "center" }}>
            <Link
              href={routeConstants.SIGN_IN_URL}
              variant="body2"
              style={{
                color: "#21abdc",
                fontSize: "0.8rem",
                textAlign: "right"
              }}
            >
              {authPageConstants.BACK_TO_LOGIN_TEXT}
            </Link>
          </Grid>
        </Grid>
      </Layout>
    </div>
  );
}

export default function Footer(props) {
    const classes = useStyles();

    return (
        <footer className={classes.footer}>
            <Typography variant="h6" align="center" gutterBottom>
                With <span role="img" aria-label="heart">❤️</span> from <Link color="inherit" href="https://xprilion.com">
                    xprilion
            </Link>
            </Typography>
            <Typography variant="subtitle1" align="center" color="textSecondary" component="p">
                <Link color="inherit" href="https://github.com/xprilion/fireshort">
                    Fork on GitHub
            </Link>
            </Typography>
        </footer>
    );
}

CountySpecificNew = (props) => {
  const classes = useStyles();

  const [countyData, setCountyData] = React.useState(null);
  React.useEffect(() => {
    props.source.fetchNewCountyInfo().then(data => setCountyData(data[0]));
  }, [props.source])

  if (!countyData) {
    return <div> Loading</div>;
  }

  console.log(countyData);
  let level = CA_statusMap[countyData.community] || {
    text: "Unknown",
    color: "blue",
  };
  const textStyle = {
    color: level && level.color,
    fontSize: 'x-large',
  }
  return <div className={classes.CA}>
    Level:<span style={textStyle}> {level.text}. </span>
    {countyData.school}
    {countyData.healthwebsites &&
      countyData.healthwebsites.map(site =>
        <span className={classes.CA} >
          <Link target="_blank" href={site} className={props.className}>
            {site}
          </Link>
        </span>
      )
    }
  </div>;
}

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

  return (
    <div className={classes.root}>
      <Grid>
        <main>
          <div className={classes.heroContent}>
            <Container maxWidth="sm">
              <Typography component="h1" variant="h3" align="center" color="textPrimary" gutterBottom>
                For the community, by the community
              </Typography>
              <Typography variant="body1" align="center" color="textSecondary" paragraph>
                CoronaTracker is an easy-to-use, private-by-design, open-source application for monitoring your health
                and staying informed during the COVID-19 crisis. Here&apos;s what we&apos;ve accomplished so far
              </Typography>
            </Container>
          </div>
          <Link className={classes.color} href="https://forms.gle/PrD1QY2z3a7htB5W9" color="inherit">
            Take our Beta Survey!
          </Link>
          <Container className={classes.cardGrid} maxWidth="md">
            {/* End hero unit */}
            <Grid container spacing={4}>
              {cards.map(card => (
                <Grid item key={card.id} xs={12} sm={6} md={4}>
                  <Link href={card.link}>
                    <Card className={classes.card}>
                      <CardMedia className={classes.cardMedia} image={card.img} title="Image title" />
                      <CardContent className={classes.cardContent}>
                        <Typography gutterBottom variant="subtitle1" component="h2">
                          {card.title}
                        </Typography>
                        <Typography variant="body2">{card.about}</Typography>
                      </CardContent>
                    </Card>
                  </Link>
                </Grid>
              ))}
            </Grid>
          </Container>
        </main>
        <footer className={classes.footer}>
          <Typography variant="h6" align="center" gutterBottom>
            Support Us!
          </Typography>
          <Typography variant="body1" align="center" color="textSecondary" component="p">
            Star our GitHub, fill out our user survey, anything counts! CoronaTracker is made with{' '}
            <span role="img" aria-label="heart">
              ❤️
            </span>{' '}
            in NYC and across the globe
          </Typography>
          {/* <Copyright /> */}
        </footer>
      </Grid>
    </div>
  );
}

render() {
    return (
      <div style={{ marginTop: '200px' }}>
        <div>
          <h2>Login</h2>
        </div>

        <div>
          <TextField
            id="standard-basic"
            type="text"
            autoComplete="off"
            name="username"
            value={this.state.username}
            onChange={this.onChange}
            placeholder="User Name"
            required
          />
          <br /><br />
          <TextField
            id="standard-basic"
            type="password"
            autoComplete="off"
            name="password"
            value={this.state.password}
            onChange={this.onChange}
            placeholder="Password"
            required
          />
          <br /><br />
          <Button
            className="button_style"
            variant="contained"
            color="primary"
            size="small"
            disabled={this.state.username == '' && this.state.password == ''}
            onClick={this.login}
          >
            Login
          </Button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Link href="/register">
            Register
          </Link>
        </div>
      </div>
    );
  }

constructor(props) {
        super(props);

        this.state = {
            loading: true,
            filters: {
                dateRange: {
                    begin: moment()
                        .clone()
                        .subtract(1, 'month'),
                    end: moment(),
                },
            },
            page: -1,
            rowsPerPage: 25,
            data: [],
            columns: [
                {
                    label: '',
                    key: 'modifiedDate',
                    display: (row, value) => {
                        return moment(value).format('ddd, MMM D, YYYY, HH:mm');
                    },
                },
                {
                    label: t('ehr', 'Name'),
                    key: 'name',
                    display: (row, value) => {
                        const viewFileUrl = OC.generateUrl(row.path);

                        return (
                            <Link href={viewFileUrl} target="_blank" color="primary">
                                {value}
                            </Link>
                        );
                    },
                },
            ],
        };

        this.documentService = new DocumentService();
    }

render() {
    const { id, item, plural, count, style, noLink, name } = this.props;

    let text = '';
    let width = 80;
    if (count > 1) {
      text += `${count} `;
    }
    if (name !== null) {
      text += name;
      if (name === '') {
        width = 20;
      }
    } else {
      text += item.name;
      if (count !== 1 || plural !== null) {
        text += (plural !== null ? plural : 's');
      }
    }

    if (!item.icon) {
      text = <Skeleton variant="text" style={{ display: 'inline-block', marginLeft: 4, width }} />;
    }

    if (noLink) {
      return (
        <Typography component="span" style={style}>
          <Item id={id} inline />
          {text}
        </Typography>
      );
    }

    return (
      <ItemTooltip itemId={id} disabled={!item.icon}>
        <Link className="inline-link" style={style}>
          <Item id={id} inline tooltipDisabled />
          {text}
        </Link>
      </ItemTooltip>
    );
  }