@fortawesome/free-brands-svg-icons#faPaypal TypeScript Examples

links = [{
  i18Key: "social.paypal",
  href: process.env.REACT_APP_PAYPAL_LINK,
  svg: faPaypal,
  label: "paypal",
}, {
  i18Key: "social.patreon",
  href: process.env.REACT_APP_PATREON_LINK,
  svg: faPatreon,
  label: "patreon",
}, {
  i18Key: "social.discord",
  href: process.env.REACT_APP_DISCORD_LINK,
  svg: faDiscord,
  label: "discord",
},] as const

SUPPORTED_METHODS: { [key: string]: PaymentMethodMetadata } = {
    [PaymentMethodName.COINGATE]: {
        displayOrder: 0,
        displayText: "Crypto",
        icon: faBitcoin,
        gateway: "coingate",
    },
    [PaymentMethodName.PAYPAL]: {
        displayOrder: 1,
        displayText: "Paypal",
        icon: faPaypal,
        gateway: "paypal",
    },
    [PaymentMethodName.STRIPE]: {
        displayOrder: 2,
        displayText: "Credit card",
        icon: faCreditCard,
        gateway: "stripe",
    },
    [PaymentMethodName.MYST]: {
        displayOrder: 3,
        displayText: "MYST",
        gateway: "coingate",
    },
}

export default function PageHome() {
  const { t } = useTranslation("page_home")
  ReactGA.send({ hitType: "pageview", page: '/home' })
  return <Box my={1} display="flex" flexDirection="column" gap={1}>
    <CardDark>
      <CardContent>
        <Trans i18nKey="intro" t={t}>
          <Typography variant="h5" gutterBottom >
            What is Genshin Optimizer?
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            Genshin Optimizer (GO) is an open-source fan-made website for the action-RPG gacha game <Link href="https://genshin.mihoyo.com/" target="_blank" rel="noreferrer"><strong>Genshin Impact</strong></Link>.
            It is mainly intended to help players with the complex aspect of the game: Artifact Optimization.
            Since artifacts are heavily RNG-based elements that directly contribute to how effective your characters are in the game, GO will try to find the best artifacts for your characters based on your current artifact inventory.
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom>
            GO can keep track of your artifacts, and allows more ease in filtering/comparing artifacts, it serves as a tool to help user find good artifacts in their inventory to level up, and bad artifacts to use as fodder.
          </Typography>
          <Typography variant="body1" color="text.secondary">
            Since GO can replicate the exact stats of any character, along with calculate all their damage numbers to up 1% accuracy, it can also serve as a Damage calculator, and a tool for theory crafting.
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
    <CardDark>
      <CardContent>
        <Trans i18nKey="notGO" t={t}>
          <Typography variant="h5" gutterBottom >
            What Genshin Optimizer is NOT:
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            GO does NOT tell you how to play the game. The information/calculations are intended to be un-opinionated as possible.
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom>
            GO does NOT supplement your lack of in-game knowledge, inappropriate configuration of the optimizer can provide misleading results. Please research your characters, and figure out how you want to use them before configuring them on GO. Think of GO as more of a calculator.
          </Typography>
          <Typography variant="body1" color="text.secondary">
            GO does NOT generally take consideration of Energy Recharge, or team rotations. Please keep those mechanics in mind when you use this tool.
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
    <CardDark sx={{ width: "100%" }}  >
      <CardContent>
        <Typography variant="h5" gutterBottom>
          <Trans i18nKey="quickLinks.title" t={t}>
            Quick Links
          </Trans>
        </Typography>
        <CardLight sx={{ mb: 1, }}>
          <CardContent>
            <Typography variant="h6" gutterBottom>
              <Trans i18nKey="quickLinks.scannerTitle" t={t}>
                Do you want to automate some of the artifact input process?
              </Trans>
            </Typography>
            <Typography color="text.secondary" gutterBottom>
              <Trans i18nKey="quickLinks.scannerText" t={t}>
                Here is a list of compatible automatic scanners that can feed data into GO. These programs will automatically scan artifacts from your game, and exporting that data into a file. This file can then be imported to GO.
              </Trans>
            </Typography>
            <Button component={RouterLink} size="small" to="/scanner" variant="contained" startIcon={<Scanner />}>
              <Trans i18nKey="quickLinks.scannerBtn" t={t}>
                Scanner List
              </Trans>
            </Button>
          </CardContent>
        </CardLight>
        <CardLight>
          <CardContent>
            <Typography variant="body1" color="text.secondary" gutterBottom >
              <Trans i18nKey="quickLinks.goGithubText" t={t}>
                GO is completely open-source, written in TypeScript, with the <FontAwesomeIcon icon={faReact} />React framework.
              </Trans>
            </Typography>
            <Button size="small" variant="contained" component="a" href={process.env.REACT_APP_GITHUB_LINK} target="_blank" rel="noreferrer" startIcon={<FontAwesomeIcon icon={faGithub} />}>
              <Trans i18nKey="quickLinks.goGithubBtn" t={t}>
                Genshin Optimizer Github
              </Trans>
            </Button>
          </CardContent>
        </CardLight>
      </CardContent>
    </CardDark>
    <CardDark>
      <CardContent>
        <Typography variant="h5" gutterBottom>
          <Trans i18nKey="features.title" t={t}>
            Features
          </Trans>
        </Typography>
        <Grid container spacing={2}>
          {features.map((feature, i) => <Grid item xs={12} md={4} key={i}>
            <FeatureCard {...feature} t={t} />
          </Grid>)}
        </Grid>
      </CardContent>
    </CardDark>
    <CardDark>
      <Grid container>
        <Grid item xs={12} md={6}>
          <CardContent >
            <Trans i18nKey="helpDev" t={t}>
              <Typography variant="h5" gutterBottom >
                Want to help the developer?
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                If you want to financially support the developer, please consider donating via <ABtn href={process.env.REACT_APP_PAYPAL_LINK} icon={<FontAwesomeIcon icon={faPaypal} />}>Paypal</ABtn> or <ABtn href={process.env.REACT_APP_PATREON_LINK} icon={<FontAwesomeIcon icon={faPatreon} />}>Patreon</ABtn>
                . GO does not host ads, and will not lock any features behind a paywall.
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                If you want to help with localization/translation of GO to your native language, request a feature or report a bug, join our <ABtn href={process.env.REACT_APP_DISCORD_LINK} icon={<FontAwesomeIcon icon={faDiscord} />}>discord</ABtn>. This is where you will find more GO-related information, and checkout what is being actively worked on.
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                You can also join the <ABtn href={process.env.REACT_APP_DEVDISCORD_LINK} icon={<FontAwesomeIcon icon={faDiscord} />}>Genshin Dev discord</ABtn> if you are interested in creating Genshin apps.
              </Typography>
            </Trans>
          </CardContent>
        </Grid>
        <Grid item xs={12} md={6}>
          <CardContent sx={{ width: "100%", height: "100%", minHeight: 300 }}>
            <iframe src={process.env.REACT_APP_DISCORD_EMBED_LINK} width="100%" height="100%" frameBorder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" title="discordFrame"></iframe>
          </CardContent>
        </Grid>
      </Grid>
    </CardDark>
    <CardDark>
      <CardContent>
        <Trans i18nKey="credits" t={t}>
          <Typography variant="h5" gutterBottom >
            Credit where credit is due
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            GO is the culmination of hundreds of hours of programming/designing by two maintainers, <ABtn href={process.env.REACT_APP_FRZYC_LINK} icon={<FontAwesomeIcon icon={faUser} />}><strong> frzyc</strong></ABtn> and <ABtn href={process.env.REACT_APP_LANTUA_LINK} icon={<FontAwesomeIcon icon={faUser} />}><strong> lantua</strong></ABtn>. There are also a ton of other resources that aid in the creation of this website. Time to take a bow and thank them.
          </Typography>
          <Typography component="div" variant="body1" color="text.secondary" >
            <ul>
              <li>Thanks to everyone in the community, and especially people on our <Link href={process.env.REACT_APP_DISCORD_LINK} target="_blank" rel="noreferrer">discord</Link> for providing feedback and helping us improve this tool.</li>
              <li>Thanks to <Link href="https://github.com/Dimbreath" target="_blank" rel="noreferrer">Dimbreath</Link>, for giving us a reliable, consistent source for Genshin data and numbers. All our calculations would be moot without them.</li>
              <li>Special thanks to members of our community who has gone the extra mile, and has been helping us with localization/translation of GO to other languages, help us test formulas by recording in-game data, and programmers who has helped us with source code contributions.</li>
              <li>Thanks for everyone else, for sharing this tool, and getting more people to use this tool.</li>
              <li>Lastly, and most importantly, thank <strong>YOU</strong>, for using GO right now.</li>
            </ul>
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
  </Box>
}