@material-ui/core#Link TypeScript Examples

Footer = () => {
  return (
    <footer>
      <Slide in={true} direction='up' timeout={3000}>
        <div className='FooterSection'>
          <Divider variant='middle'></Divider>
          <div className='FooterContainer'>
            <div className='FooterItemContainer'>
              <CopyrightIcon color='secondary' fontSize='small' />
              <Typography color='textSecondary' variant='body2'>
                hellomuthu23
              </Typography>
            </div>

            <Divider orientation='vertical' flexItem></Divider>
            <div className='FooterItemContainer'>
              <Typography color='textSecondary' variant='body2'>
                Feedback: [email protected]
              </Typography>
            </div>

            <Divider orientation='vertical' flexItem></Divider>
            <Link href='https://github.com/hellomuthu23/planning-poker/issues'>
              Submit an Issue
            </Link>
          </div>
        </div>
      </Slide>
    </footer>
  );
}

export default function Url({ value }: IBasicCellProps) {
  if (!value) return null;

  const href = value.includes("http") ? value : `https://${value}`;

  return (
    <Link
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      underline="always"
      style={{ fontWeight: "bold" }}
    >
      {value}
    </Link>
  );
}

export default function ExperimentCodeSetup(): JSX.Element {
  const classes = useStyles()
  return (
    <Paper className={classes.root}>
      <Typography variant='h4'>Experiment Code Setup</Typography>
      <br />
      <Typography variant='body1'>
        See{' '}
        <Link
          href="https://github.com/Automattic/experimentation-platform/wiki/Experimenter's-Guide#writing-the-controlvariant-code-experiences"
          rel='noopener noreferrer'
          target='_blank'
          underline='always'
        >
          the wiki
        </Link>{' '}
        for platform-specific instructions.
      </Typography>
      <br />
      <Typography variant='body1'>
        When testing manually, note that <strong>changes may take up to ten minutes to propagate</strong> due to{' '}
        <Link
          href="https://github.com/Automattic/experimentation-platform/wiki/Experimenter's-Guide#the-file-system-cache"
          rel='noopener noreferrer'
          target='_blank'
          underline='always'
        >
          the file system assignment cache
        </Link>
        . As specified in the wiki, you will need to run <Code>svn up</Code> to update your sandbox copy of the cache to
        reflect the latest changes.
      </Typography>
    </Paper>
  )
}

function LoginProviders({ onProviderSelect }: any) {
  return <div className="login-providers-content">
    <Button className="button" onClick={() => onProviderSelect('anonymous')} variant="contained" color="secondary">Play Anonymously</Button>
    <FormHelperText color="secondary" className="sign-in-helper">
      Or Sign in to pick a permanent username.
      </FormHelperText>
    <Button className="button bottom" onClick={() => onProviderSelect('google')} variant="contained" color="primary">
      <img className="google-icon-svg" src={googleLogo} alt="google" />
      <div>Sign in with Google</div>
    </Button>
    <Button disabled={true} className="button" onClick={() => onProviderSelect('facebook')} variant="contained" color="primary">
      <FacebookIcon className="google-icon-svg" />
      <div>Continue with Facebook</div>
    </Button>
    <FormHelperText className="legal-helper">By Proceeding, you are agreeing to our terms of service and that you have read our privacy policy found <Link color="secondary" onClick={() => window.open('https://htmlpreview.github.io/?https://github.com/JordanPawlett/cards-against-formality-pwa/blob/master/public/privacy_policy.html')}>here</Link>.</FormHelperText>
  </div>
}

AboutThisApp: React.FC<AboutThisAppProps> = props => {
    return (
        <Dialog open={props.visible} style={{ userSelect: 'none', textAlign: 'center' }}>
            <DialogContent>
                <AppIcon src={infoIcon} alt="SpaceEye icon" />
                <Typography variant="h6">SpaceEye</Typography>
                <Typography variant="body2" style={{ userSelect: 'text' }}>
                    Version {APP_VERSION}
                </Typography>
                <Typography variant="body2">Copyright &copy; 2020 Michael Galliers</Typography>
                <Typography variant="body2">License: {APP_LICENSE}</Typography>
                <Link
                    component="button"
                    variant="body2"
                    onClick={() => shell.openExternal(APP_BUGS_URL)}
                >
                    Report bugs
                </Link>
                <DialogActions>
                    <Button
                        onClick={() =>
                            shell.openPath(path.join(process.resourcesPath, 'legal_notices.txt'))
                        }
                    >
                        Acknowledgements
                    </Button>
                    <Button onClick={props.onClickDone}>Done</Button>
                </DialogActions>
            </DialogContent>
        </Dialog>
    )
}

export default function Social() {
    return (
        <div className="social-row">
            <Link href="https://github.com/LobisHQWorkspace" target="_blank">
                <SvgIcon color="primary" component={GitHub} />
            </Link>

            <Link href="https://twitter.com/LobisHQ" target="_blank">
                <SvgIcon color="primary" component={Twitter} />
            </Link>

            <Link href="https://discord.gg/2X44WhkFHz" target="_blank">
                <SvgIcon color="primary" component={Discord} />
            </Link>
        </div>
    );
}

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

    return (
        <Typography variant={'h4'} align={'center'}>
            <Link
                target="_blank"
                rel="noopener noreferrer"
                href="https://twitch.tv"
                underline={'none'}
                className={classes.title}
            >
                Twitch Live
            </Link>
        </Typography>
    );
}

export default function Social() {
  return (
    <div className="social-row">
      <Link href="https://github.com/Rugenerous" target="_blank">
        <SvgIcon color="primary" component={GitHub} />
      </Link>

      <Link href="https://twitter.com/rugenerous" target="_blank">
        <SvgIcon color="primary" component={Twitter} />
      </Link>

      <Link href="https://discord.gg/eKxwjUYUPc" target="_blank">
        <SvgIcon color="primary" component={Discord} />
      </Link>
    </div>
  );
}

export default function Social() {
    return (
        <div className="social-row">
            <Link href="https://github.com/Wonderland-Money/wonderland-frontend" target="_blank">
                <SvgIcon color="primary" component={GitHub} />
            </Link>

            <Link href="https://twitter.com/wonderland_fi?s=21" target="_blank">
                <SvgIcon color="primary" component={Twitter} />
            </Link>

            <Link href="https://t.me/joinchat/6UybL5rJMEhjN2Y5" target="_blank">
                <SvgIcon viewBox="0 0 32 32" color="primary" component={Telegram} />
            </Link>

            <Link href="https://discord.gg/thDHseaHUt" target="_blank">
                <SvgIcon color="primary" component={Discord} />
            </Link>
        </div>
    );
}

export default function Footer({ buildTime }) {
  const classes = useFooterStyles();
  const [language] = useLanguage();

  return (
    <Typography
      className={classes.copyrightBox}
      component={"div"}
      variant="body2"
      color="textSecondary"
      align="center"
    >
      <Box className={classes.lastUpdateBox} fontWeight="fontWeightBold">
        {i18n.LAST_UPDATE[language]}
        {`${new Date(buildTime).toLocaleDateString()} ${new Date(
          buildTime
        ).toLocaleTimeString()}`}
      </Box>

      <Box>{i18n.DISCLAIMER_1[language]}</Box>
      <Box>{i18n.DISCLAIMER_2[language]}</Box>

      <Box className={classes.contributeBox}>
        <Link href="http://github.com/Guglio95/posso-uscire">
          {i18n.CONTRIBUTE[language]}
        </Link>
      </Box>
    </Typography>
  );
}

Footer = ({ classes }: FooterProps) => {
  return (
    <AppBar className={classes.appBar} position="static">
      <Toolbar>
        <Grid container justify="center">
          <Grid item xs={10} container>
            <Link className={classes.navBarLink} href="/map">
              <Typography color="textPrimary" variant="h4">
                Aqua
              </Typography>
              <Typography style={{ color: "#8AC6DE" }} variant="h4">
                link
              </Typography>
            </Link>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
}

SidebarLogo = () => {
  const classes = useSidebarLogoStyles();
  const { isOpen } = useSidebarOpenState();

  return (
    <div className={classes.root}>
      <Link
        component={NavLink}
        to="/"
        underline="none"
        className={classes.link}
        aria-label="Home"
      >
        {isOpen ? <LogoFull /> : <LogoIcon />}
      </Link>
    </div>
  );
}

export function ContentPageOne({
  setSecurityCheckupPageIndex
}: ContentPageOneProps) {
  return (
    <>
      <p>
        Each of your accounts has a corresponding Secret Key file that provides
        access to the funds on that account.
      </p>
      <ul>
        <li>
          Make sure that you have downloaded and backed up each Secret Key file{' '}
          <b>securely</b>.{' '}
          <Link
            component="button"
            onClick={() => setSecurityCheckupPageIndex(1)}
          >
            Start here
          </Link>
        </li>
        <li>Never share your Secret Key file with anyone.</li>
        <li>The Casper Signer Team will never ask for your Secret Key file.</li>
      </ul>
    </>
  );
}

createCrumb(name: string, path: string, subPath?: ConfigEditor.Path) {
    return (
      <Link
        key={path}
        className={this.props.classes.link}
        color="inherit"
        onClick={() => this.props.pageClicked(path, subPath)}
      >
        {name}
      </Link>
    );
  }

UserBadge: React.FC<{ address: string, size?: number, gap?: number, short?: boolean, smallText?: boolean }> = ({ address, size, smallText, gap, short }) => {
  const theme = useTheme();
  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"));
  const isMediumSmall = useMediaQuery(theme.breakpoints.down("md"));
  const { network } = useTezos();


  return (
    <Grid container wrap="nowrap" alignItems="center" direction="row" style={{ gap: gap || 8 }}>
      <Grid item>
        <ProfileAvatar address={address} size={size || 22} />
      </Grid>
      <Grid item>
        <Link href={`https://${networkNameMap[network]}.tzkt.io/` + address} target="_blank">
          <Text variant="body1" color="textPrimary" style={{ fontSize: smallText? 13: undefined }}>
            <UserProfileName
              address={address}
              short={short || isMobileSmall || isMediumSmall}
            />
          </Text>
        </Link>
      </Grid>
    </Grid>
  );
}

Footer: React.FC<IProps> = (props) => {
  const theme: Theme = useTheme();
  const smallQuery = useMediaQuery(theme.breakpoints.up("sm"));

  return (
    <Grid container spacing={10} style={{marginTop: "10px", marginBottom: "10px", padding: smallQuery ? "" : "30px"}} direction={smallQuery ? "row" : "column"}>
      {props.footerLinks.map((footerLink) => {
        return (
          <Link href={footerLink.link} style={{paddingRight: "15px", fontSize: "16px"}} color="textSecondary">{footerLink.name}</Link>
        );
      })}
    </Grid>
  );
}

HelperLink = (
  <Link
    className={styles.HelperLink}
    href={GUPSHUP_ACCOUNT_CREATION}
    rel="noreferrer"
    target="_blank"
  >
    Help?
  </Link>
)

ContactMenu = () => {
  const classes = useStyles();
  const { t: translate } = useTranslation();
  return (
    <Grid container alignItems="center" className={classes.container}>
      <Typography variant="body1">
        {translate("contact.developedBy")} &nbsp;
      </Typography>
      <Link href="https://hspotlight.netlify.app/">HSpotlight</Link>
    </Grid>
  );
}

LinkedData = ({
    children,
    label,
    icon,
    to,
    ...rest
}: {
    children: ReactNode;
    label: ReactNode;
    icon: ReactNode;
    to: any;
} & BoxProps): ReactElement => {
    const classes = useStyles();
    return (
        <Link component={RouterLink} to={to} className={classes.link}>
            <Box
                component="li"
                display="flex"
                alignItems="center"
                justifyContent="center"
                flexDirection="column"
                className={classes.root}
                {...rest}
            >
                <Box display="flex" alignItems="center">
                    <Box marginRight={1}>{icon}</Box>
                    <Typography component="span">{children}</Typography>
                </Box>
                <Typography variant="caption">{label}</Typography>
            </Box>
        </Link>
    );
}

export default function HeaderBar(props: HeaderBarProps) {
  const { title } = props;
  const classes = useStyles(props);
  const router = useRouter();

  return (
    <AppBar position="static" className={classes.headerBar}>
      <Toolbar>
        <Grid container>
          <Grid item xs={11} className={classes.headerLink}>
            <Link classes={{ root: classes.headerLinkText }} underline="none" href={router.linkToHome()}>
              <Typography variant="h6" color="inherit">
                {title}
              </Typography>
            </Link>
          </Grid>
          <Grid item xs={1} className={classes.headerLangSelector}>
            <LanguageSwitch />
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
}

function MarketRoute({ market }: { market: PublicKey }) {
  const marketName = useMarketName(market);
  const bbo = useBbo(market);
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        marginTop: "5px",
      }}
    >
      <Link
        href={`https://dex.projectserum.com/#/market/${market.toString()}`}
        target="_blank"
        rel="noopener"
      >
        {marketName}
      </Link>
      <code style={{ marginLeft: "10px" }}>
        {bbo && bbo.mid ? bbo.mid.toFixed(6) : "-"}
      </code>
    </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="https://devias.io/"
          target="_blank"
        >
          Devias IO
        </Link>
        . 2019
      </Typography>
      <Typography variant="caption">
        Created with love for the environment. By designers and developers who
        love to work together in offices!
      </Typography>
    </div>
  );
}

Summary: React.FC<SummaryProps> = ({ meta }) => {
  return (
    <>
      <Typography variant="subtitle2" component="h2">
        Summary
      </Typography>
      <Box my={1}>
        <MUIAlert severity={AlertType.INFO}>
          This is a summary of the calls results used to send your voice
          notification. To learn more about call status and definitions visit{' '}
          <Link
            href="https://www.twilio.com/docs/voice/api/call-resource#call-status-values"
            target="_blank"
            rel="noopener"
          >
            Twilio Call Resource documentation
          </Link>
        </MUIAlert>
      </Box>
      <List dense>
        {Object.values(CallStatus).map((status) => {
          const { count = {} as Count } = meta;
          return (
            <ListItem key={status} dense style={{ padding: 0 }}>
              <ListItemText style={{ margin: 0 }}>
                <Typography variant="subtitle1" component="div">
                  {`${count[status]} - ${status}`}
                </Typography>
              </ListItemText>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

SkipToLinks = (): ReactElement => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')

  const classes = useStyles({ prefersDarkMode })

  return (
    <div className={classes.root}>
      <div className={classes.container}>
        <Link
          className={classes.main}
          tabIndex={0}
          onClick={() => {
            document.getElementsByTagName('main')[0].focus()
          }}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              document.getElementsByTagName('main')[0].focus()
            }
          }}
        >
          <Typography>Skip to main content</Typography>
        </Link>
      </div>
    </div>
  )
}

Copyright = () => {
    const copyright = useMemo(() => {
        return (
            <Typography color="textSecondary" align="center">
                Copyright ©
                <Link color="inherit" href="https://www.flect.co.jp/">
                    FLECT, Co., Ltd.
                </Link>
                {new Date().getFullYear()}
            </Typography>
        );
    }, []);
    return <>{copyright}</>;
}

projectSettingsForm = [
  {
    type: FieldType.contentHeader,
    name: "_contentHeading_signInOptions",
    label: "Authentication",
  },
  {
    type: FieldType.multiSelect,
    name: "signInOptions",
    label: "Sign-In Options",
    options: Object.keys(authOptions).map((option) => ({
      value: option,
      label: _startCase(option).replace("Github", "GitHub"),
    })),
    defaultValue: ["google"],
    required: true,
    assistiveText: (
      <>
        Before enabling a new sign-in option, make sure it’s configured in your
        Firebase project.
        <br />
        <Link
          href={`https://github.com/firebase/firebaseui-web#configuring-sign-in-providers`}
          target="_blank"
          rel="noopener"
        >
          How to configure sign-in options
          <OpenInNewIcon
            aria-label="Open in new tab"
            fontSize="small"
            style={{ verticalAlign: "bottom", marginLeft: 4 }}
          />
        </Link>
      </>
    ) as any,
  },
  {
    type: FieldType.contentHeader,
    name: "_contentHeading_cloudRun",
    label: "Functions Builder",
  },
  {
    type: FieldType.shortText,
    name: "ftBuildUrl",
    label: "Cloud Run Trigger URL",
    format: "url",
    assistiveText: (
      <>
        Firetable requires a cloud run instance to build and deploy Firetable
        cloud functions ,
        <Link href={WIKI_LINKS.FtFunctions} target="_blank" rel="noopener">
          more info
          <OpenInNewIcon
            aria-label="Open in new tab"
            fontSize="small"
            style={{ verticalAlign: "bottom", marginLeft: 4 }}
          />
        </Link>
        .
        <br />
        To deploy the cloud run instance simply click the button bellow and
        follow the cloud shell prompts.
      </>
    ) as any,
  },
]

export default function HealthIndicatorTable({
  className,
  indicators,
}: {
  className?: string
  indicators: HealthIndicator[]
}): JSX.Element {
  const classes = useStyles()
  const decorationClasses = useDecorationStyles()
  return (
    <TableContainer className={className}>
      <Table className={classes.table} aria-label='simple table'>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Unit</TableCell>
            <TableCell>Value</TableCell>
            <TableCell>{/* Indication Emoji */}</TableCell>
            <TableCell>Indication</TableCell>
            <TableCell>Reason</TableCell>
            <TableCell>Recommendation</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {indicators.map((indicator) => (
            <TableRow key={indicator.name}>
              <TableCell scope='row'>
                <Link href={indicator.link} target='_blank'>
                  {indicator.name}
                </Link>
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.unit === HealthIndicatorUnit.Pvalue ? (
                  <Tooltip title='The smaller the p-value the more likely there is an issue.'>
                    <span className={decorationClasses.tooltipped}>p-value</span>
                  </Tooltip>
                ) : (
                  <span>{indicator.unit}</span>
                )}
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.value.toFixed(4)}
              </TableCell>
              <TableCell scope='row'>
                <span>{severityEmoji[indicator.indication.severity]}</span>
              </TableCell>
              <TableCell
                scope='row'
                className={clsx(
                  classes.indication,
                  classes[indicationSeverityClassSymbol(indicator.indication.severity)],
                  classes.monospace,
                  classes.nowrap,
                )}
              >
                <span>{indicator.indication.code}</span>
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.indication.reason}
              </TableCell>
              <TableCell scope='row' className={clsx(classes.deemphasized, classes.recommendation)}>
                <Typography variant='body1'>{indicator.indication.recommendation}</Typography>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )
}

TimingAttack = (props: IChallengeProps) => {

  const layoutContext = useContext(LayoutContext);
  const classes = useStyles();

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loginMessage, setLoginMessage] = useState("");
  const [modalOpen, setModalOpen] = useState(false);

  const { setLoading } = layoutContext;
  const { setFlag } = props;

  const onUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value);
  const onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value);

  const onForgotPasswordPressed = () => setModalOpen(true);

  const onLogin = (e: React.SyntheticEvent) => {
    e.preventDefault();

    setLoading(true);
    setLoginMessage("");

    TimingAttackService.login({ username, password }).then(r => {
      if (!r.success) setLoginMessage("Username of password incorrect");

      setLoading(false);
    });
  };


  const closeModal = () => setModalOpen(false);

  return (
    <>
      <Box className={classes.bg} id="timing-attack-container">
        <ForgotPasswordModal isOpen={modalOpen} setIsOpen={setModalOpen} setFlag={setFlag} />
        <Container maxWidth="xs" className={classes.container}>
          <Box pt={5} pb={5}>
            <Box className={classes.titleContainer}>
              <Typography variant="h4">Login</Typography>
            </Box>

            <form noValidate autoComplete="off" onSubmit={onLogin}>
              <Box textAlign="center">
                <PowerIcon className={classes.logo} />
              </Box>

              <Box pb={2}>
                <WhiteTextField fullWidth label="Username" value={username} onChange={onUsernameChange} autoFocus />
              </Box>

              <Box pb={2}>
                <WhiteTextField fullWidth label="Password" value={password} onChange={onPasswordChange} type="password" />
              </Box>

              <Box pb={2} textAlign="right">
                <Link style={{ color: 'white' }} onClick={onForgotPasswordPressed}>Forgot password?</Link>
              </Box>

              <Box className={classes.loginMessage}>
                <Typography color="secondary">{loginMessage}</Typography>
              </Box>

              <Box className={classes.loginButtonContainer}>
                <WhiteButton variant="outlined" type="submit">Login</WhiteButton>
              </Box>
            </form>
          </Box>
        </Container>
      </Box>
    </>);
}

Settings: React.FC<SettingsProps> = props => {
    const {
        onClickBack,
        onClickQuit,
        onClickStartOnLoginSwitch,
        onClickAutoUpdateSwitch,
        openAboutApp,
        closeAboutApp,
        shouldStartOnLogin,
        autoUpdate,
        aboutAppVisible
    } = props

    return (
        <SettingsContainer>
            <SectionsContainer>
                <SectionsColumn>
                    <Box my={1} />
                    <Grid container direction="row" justify="center">
                        <Typography variant="h5">SpaceEye</Typography>
                    </Grid>
                    <Box my={1} />
                    <Grid container direction="row" justify="center">
                        <Button variant="outlined" color="primary" onClick={onClickBack}>
                            Back
                        </Button>
                    </Grid>
                    <Spacer />
                    <Grid container direction="column" justify="center" alignItems="center">
                        <Link
                            component="button"
                            variant="body2"
                            color="textSecondary"
                            onClick={openAboutApp}
                        >
                            About
                        </Link>
                        <Box my={0.5} />
                        <Button variant="outlined" color="secondary" onClick={onClickQuit}>
                            Quit
                        </Button>
                    </Grid>
                    <Box my={1} />
                </SectionsColumn>
            </SectionsContainer>
            <SettingsColumn>
                <Box my={2} />
                <Grid container direction="row" justify="center">
                    <Typography variant="h6">Settings</Typography>
                </Grid>
                <Box my={2} mx={1}>
                    <Divider variant="fullWidth" />
                </Box>
                <Grid container direction="column" justify="flex-start" alignContent="flex-start">
                    <SettingsSwitch
                        isChecked={shouldStartOnLogin}
                        onChange={onClickStartOnLoginSwitch}
                        label="Start on Login"
                    />
                    {/* Don't show auto-update option if downloaded from an app store */}
                    {!process.mas && !process.windowsStore && (
                        <SettingsSwitch
                            isChecked={autoUpdate}
                            onChange={onClickAutoUpdateSwitch}
                            label="Auto update"
                        />
                    )}
                </Grid>
            </SettingsColumn>
            <AboutThisApp onClickDone={closeAboutApp} visible={aboutAppVisible} />
        </SettingsContainer>
    )
}