@material-ui/core#Link JavaScript Examples

The following examples show how to use @material-ui/core#Link. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: navbar.js    From connect-4-online-multiplayer with MIT License 6 votes vote down vote up
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>
  );
}
Example #2
Source File: index.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up
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>
  );
}
Example #3
Source File: About.jsx    From Corona-tracker with MIT License 6 votes vote down vote up
// 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>
  );
}
Example #4
Source File: SocialIcons.js    From personal-website-react with MIT License 6 votes vote down vote up
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>;
}
Example #5
Source File: HospitalCard.js    From WebApp with MIT License 6 votes vote down vote up
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>
    </>
  )
}
Example #6
Source File: DoodadLink.jsx    From archeage-tools with The Unlicense 6 votes vote down vote up
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>
    );
  }
Example #7
Source File: AppNewsUpdate.js    From course-manager with MIT License 6 votes vote down vote up
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>
  );
}
Example #8
Source File: Footer.js    From telar-cli with MIT License 6 votes vote down vote up
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>
  );
}
Example #9
Source File: Contributors.js    From spells-fyi with MIT License 6 votes vote down vote up
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>
    )
}
Example #10
Source File: Popup.js    From covid-trials-dashboard with MIT License 6 votes vote down vote up
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;
`
Example #11
Source File: BreadCrumbs.js    From algo-book with GNU General Public License v3.0 6 votes vote down vote up
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>
    );
}
Example #12
Source File: Breadcrumbs.js    From gardener-site with Mozilla Public License 2.0 6 votes vote down vote up
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>
  );
}
Example #13
Source File: Localizer.jsx    From Turnip-Calculator with MIT License 6 votes vote down vote up
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
    []
  );
}
Example #14
Source File: Footer.js    From paper-and-ink with MIT License 6 votes vote down vote up
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>
  );
}
Example #15
Source File: Footer.js    From git-insights with MIT License 6 votes vote down vote up
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>
  );
}
Example #16
Source File: index.js    From yasn with MIT License 6 votes vote down vote up
function Copyright() {
  return (
    <Typography variant="body2" align="center">
      {"Copyright © "}
      <Link color="inherit" href="https://github.com/hitgo00/yasn">
        YASN
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}
Example #17
Source File: LinkWithIcon.jsx    From frontend with MIT License 6 votes vote down vote up
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>
  );
}
Example #18
Source File: Footer.js    From hacktoberfest-participants with MIT License 6 votes vote down vote up
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>
  );
}
Example #19
Source File: index.js    From News24x7-Client with MIT License 6 votes vote down vote up
function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" className="footer-text">
      {"Copyright © "}
      <Link href="/">News Aggregator</Link> {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}
Example #20
Source File: OftadehBreadcrumbs.jsx    From oftadeh-react-admin with MIT License 6 votes vote down vote up
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>
  );
}
Example #21
Source File: Footer.js    From FireShort with MIT License 6 votes vote down vote up
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>
    );
}
Example #22
Source File: index.js    From yi-note with GNU General Public License v3.0 6 votes vote down vote up
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>
  );
}
Example #23
Source File: RequiredConformation.js    From medha-STPC with GNU Affero General Public License v3.0 6 votes vote down vote up
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>
  );
}
Example #24
Source File: Footer.js    From fireshort with MIT License 6 votes vote down vote up
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>
    );
}
Example #25
Source File: PageCounty.js    From covid-19 with MIT License 6 votes vote down vote up
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>;
}
Example #26
Source File: About.jsx    From Corona-tracker with MIT License 5 votes vote down vote up
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>
  );
}
Example #27
Source File: Login.js    From Registration-Login-and-CRUD-Action-using-MERN-stack with GNU General Public License v3.0 5 votes vote down vote up
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>
    );
  }
Example #28
Source File: DocumentsDataModule.js    From ehr with GNU Affero General Public License v3.0 5 votes vote down vote up
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();
    }
Example #29
Source File: ItemLink.jsx    From archeage-tools with The Unlicense 5 votes vote down vote up
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>
    );
  }