react-helmet-async#Helmet TypeScript Examples

The following examples show how to use react-helmet-async#Helmet. 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: index.tsx From react-boilerplate-cra-template with MIT License

6 votes

export function NotFoundPage() {
  return (
    <>
      <Helmet>
        <title>404 Page Not Found</title>
        <meta name="description" content="Page not found" />
      </Helmet>
      <NavBar />
      <Wrapper>
        <Title>
          4
          <span role="img" aria-label="Crying Face">
            ?
          </span>
          4
        </Title>
        <P>Page not found.</P>
        <Link to={process.env.PUBLIC_URL + '/'}>Return to Home Page</Link>
      </Wrapper>
    </>
  );
}

Example #2

Source File: index.tsx From interbtc-ui with Apache License 2.0

6 votes

InterlayHelmet = (): JSX.Element => (
  <Helmet>
    <link rel='apple-touch-icon' sizes='180x180' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/apple-touch-icon.png`} />
    <link rel='icon' type='image/png' sizes='32x32' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/favicon-32x32.png`} />
    <link rel='icon' type='image/png' sizes='16x16' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/favicon-16x16.png`} />
    {/*
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    */}
    <link rel='mask-icon' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/safari-pinned-tab.svg`} color='#5bbad5' />
    <link rel='shortcut icon' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/favicon.ico`} />
    <meta name='msapplication-config' content={`/${PUBLIC_ASSETS_FOLDER_NAME}/browserconfig.xml`} />
    <link rel='manifest' href={`/${PUBLIC_ASSETS_FOLDER_NAME}/site.webmanifest`} />
    <title>{APP_NAME}</title>
    {/* Primary Meta Tags */}
    <meta name='title' content={APP_NAME} />
    <meta name='description' content={`${APP_NAME}: Trustless and open DeFi access for your Bitcoin`} />
    {/* Open Graph / Facebook */}
    <meta property='og:type' content='website' />
    <meta property='og:url' content={APP_DOMAIN} />
    <meta property='og:title' content={APP_NAME} />
    <meta property='og:description' content={`${APP_NAME}: Trustless and open DeFi access for your Bitcoin`} />
    <meta property='og:image' content={`${APP_DOMAIN}/${PUBLIC_ASSETS_FOLDER_NAME}/${OPEN_GRAPH_IMAGE_FILE_NAME}`} />
    <meta property='og:image:width' content='1200' />
    <meta property='og:image:height' content='598' />
    {/* Twitter */}
    <meta property='twitter:card' content='summary_large_image' />
    <meta property='twitter:url' content={APP_DOMAIN} />
    <meta property='twitter:title' content={APP_NAME} />
    <meta property='twitter:description' content={`${APP_NAME}: Trustless and open DeFi access for your Bitcoin`} />
    <meta
      property='twitter:image'
      content={`${APP_DOMAIN}/${PUBLIC_ASSETS_FOLDER_NAME}/${OPEN_GRAPH_IMAGE_FILE_NAME}`}
    />
  </Helmet>
)

Example #3

Source File: App.tsx From cra-serverless with MIT License

6 votes

App: React.FC = () => (
  <>
    <GlobalStyles />

    <Helmet>
      <title>{process.env.REACT_APP_NAME}</title>
    </Helmet>

    <Wrapper>
      <Navigation />

      <Switch>
        <Route path="/details/:id" component={Details} />
        <Route path="/" component={Home} exact />

        <Route component={NotFound} />
      </Switch>

      <Footer />
    </Wrapper>
  </>
)

Example #4

Source File: App.tsx From cra-pipeline with MIT License

6 votes

App: React.FC = () => (
  <Wrapper>
    <Helmet>
      <title>CRA Pipeline</title>
    </Helmet>
    <Header>
      <Logo alt="Create React App - Logo" />
      <p>
        Edit <code>src/App.tsx</code> and save to reload.
      </p>
      <Link href="https://reactjs.org">Learn React</Link>
    </Header>
  </Wrapper>
)

Example #5

Source File: shareStoryPlayerPage.tsx From datart with Apache License 2.0

6 votes

export function ShareStoryPlayerPage() {
  const { i18n } = useTranslation();

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          title="Datart Share Link"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route
            path="/shareStoryPlayer/:token"
            component={LazyShareStoryPlayer}
          />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Example #6

Source File: applications.tsx From leek with Apache License 2.0

6 votes

ApplicationsPage = () => {
  return (
    <>
      <Helmet>
        <html lang="en" />
        <title>Applications</title>
        <meta name="description" content="Leek applications" />
        <meta name="keywords" content="leek, applications" />
      </Helmet>

      <Applications />
    </>
  );
}

Example #7

Source File: shareDashboardPage.tsx From datart with Apache License 2.0

6 votes

export function ShareDashboardPage() {
  const { i18n } = useTranslation();

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          title="Datart Share Link"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route path="/shareDashboard/:token" component={LazyShareDashboard} />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Example #8

Source File: FallbackUi.tsx From itwin-viewer with MIT License

6 votes

FallbackUi = ({
  imageSource,
  imageAlt,
  className,
  title,
  text,
  withHelmet,
}: Props) => {
  const innerText = sanitizeHtml(text);
  return (
    <div className={classNames(styles.container, className)}>
      {withHelmet && <Helmet title={title} />}
      <div className={styles.content}>
        <img src={imageSource} alt={imageAlt} data-testid="test-fallback-img" />
        <p className={styles.title} data-testid="test-fallback-title">
          <Subheading2>{title}</Subheading2>
        </p>
        <p className={styles.message} data-testid="test-fallback-text">
          <Subheading dangerouslySetInnerHTML={{ __html: innerText }} />
        </p>
      </div>
    </div>
  );
}

Example #9

Source File: App.tsx From akashlytics with GNU General Public License v3.0

6 votes

export function App() {
  const mediaQuery = useMediaQueryContext();
  const classes = useStyles();

  return (
    <div>
      <Helmet defaultTitle="Akashlytics" titleTemplate="Akashlytics - %s" />

      <Header />

      <BetaBanner />

      <div className={clsx(classes.appBody, { [classes.appBodySmall]: mediaQuery.smallScreen })}>
        <Switch>
          <Redirect from="/revenue/daily" to="/graph/daily-akt-spent" />
          <Redirect from="/revenue/total" to="/graph/total-akt-spent" />
          <Route path="/faq">
            <Faq />
          </Route>
          <Route path="/price-compare">
            <PriceCompare />
          </Route>
          <Route path="/graph/:snapshot">
            <Graph />
          </Route>
          <Route path="/deploy">
            <Deploy />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>

      <Footer />
    </div>
  );
}

Example #10

Source File: index.tsx From react-boilerplate-cra-template with MIT License

6 votes

export function HomePage() {
  return (
    <>
      <Helmet>
        <title>Home Page</title>
        <meta
          name="description"
          content="A React Boilerplate application homepage"
        />
      </Helmet>
      <NavBar />
      <PageWrapper>
        <Masthead />
        <Features />
      </PageWrapper>
    </>
  );
}

Example #11

Source File: index.tsx From oasis-wallet-web with Apache License 2.0

6 votes

export function App() {
  useRouteRedirects()
  const { i18n } = useTranslation()
  const size = useContext(ResponsiveContext)

  return (
    <ModalProvider>
      <Helmet
        titleTemplate="%s - Oasis Wallet"
        defaultTitle="Oasis Wallet"
        htmlAttributes={{ lang: i18n.language }}
      >
        <meta name="description" content="A wallet for Oasis" />
      </Helmet>
      <Box direction="row-responsive" background="background-back" fill style={{ minHeight: '100vh' }}>
        <Navigation />
        <Box flex pad={{ top: size === 'small' ? '64px' : undefined }}>
          <AppMain>
            <FatalErrorHandler />
            <Toolbar />
            <TransitionGroup>
              <Switch>
                <TransitionRoute exact path="/" component={HomePage} />
                <TransitionRoute exact path="/create-wallet" component={CreateWalletPage} />
                <TransitionRoute path="/open-wallet" component={OpenWalletPage} />
                <TransitionRoute exact path="/account/:address/stake" component={AccountPage} />
                <TransitionRoute path="/account/:address" component={AccountPage} />
              </Switch>
            </TransitionGroup>
            <Footer />
          </AppMain>
        </Box>
      </Box>
    </ModalProvider>
  )
}

Example #12

Source File: index.tsx From react-boilerplate-cra-template with MIT License

6 votes

export function HomePage() {
  return (
    <>
      <Helmet>
        <title>HomePage</title>
        <meta name="description" content="A Boilerplate application homepage" />
      </Helmet>
      <span>My HomePage</span>
    </>
  );
}

Example #13

Source File: main.component.tsx From filecoin-CID-checker with Apache License 2.0

6 votes

Main = () => {
  return (
    <HelmetProvider>
      <Router>
        <MainWrapper>
          <Helmet>
            <title>{DOCUMENT_TITLE}</title>
            <meta content={DOCUMENT_DESCRIPTION} name="description" />
          </Helmet>
          <SearchProvider>
            <Header />
            <Body>
              <Switch>
                <Route exact path={['/', '/deal/:deal', '/:search']} component={Deals} />
                <Redirect to="/" />
              </Switch>
            </Body>
          </SearchProvider>
        </MainWrapper>
      </Router>
    </HelmetProvider>
  )
}

Example #14

Source File: Page.tsx From vvs-ui with GNU General Public License v3.0

6 votes

PageMeta: React.FC<{ symbol?: string }> = ({ symbol }) => {

  const pageMeta = { title: 'Home | VVS Finance' }
  const { title, description, image } = { ...DEFAULT_META, ...pageMeta }
  
  const pageTitle = title

  return (
    <Helmet>
      <title>{pageTitle}</title>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
    </Helmet>
  )
}

Example #15

Source File: social-profile.tsx From gatsby-plugin-next-seo with MIT License

6 votes

SocialProfileJsonLd: FC<SocialProfileJsonLdProps> = ({
  type,
  name,
  url,
  sameAs = [],
  defer = false,
}) => {
  const jsonld = `{
    "@context": "http://schema.org",
    "@type": "${type}",
    "name": "${name}",
    "url": "${url}",
    "sameAs": [
      ${sameAs.map((socialUrl) => `"${socialUrl}"`).toString()}
     ]
  }`;

  return (
    <Helmet defer={defer}>
      <script type='application/ld+json'>{jsonld}</script>
    </Helmet>
  );
}

Example #16

Source File: FallbackUi.tsx From viewer with MIT License

6 votes

FallbackUi = ({
  imageSource,
  imageAlt,
  className,
  title,
  text,
  withHelmet,
}: Props): JSX.Element => {
  const innerText = sanitizeHtml(text);
  return (
    <div className={classNames(styles.container, className)}>
      {withHelmet && <Helmet title={title} />}
      <div className={styles.content}>
        <img src={imageSource} alt={imageAlt} data-testid="test-fallback-img" />
        <Headline className={styles.title} data-testid="test-fallback-title">
          <Title>{title}</Title>
        </Headline>
        <Headline className={styles.message} data-testid="test-fallback-text">
          <Subheading dangerouslySetInnerHTML={{ __html: innerText }} />
        </Headline>
      </div>
    </div>
  );
}

Example #17

Source File: Layout.tsx From react-pokedex with MIT License

6 votes

Layout = ({ children, title }: Props) => {
  return (
    <>
      <Helmet>
        <meta charSet="utf-8" />
        <title>React Pokédex {title && `| ${title}`}</title>
        <meta
          name="description"
          content="a simple pokédex for your pokemon needs."
        />
      </Helmet>
      <Navbar />
      <div className="px-2 md:px-24 lg:px-64 pt-24">{children}</div>
    </>
  );
}

Example #18

Source File: Page1.tsx From glide-frontend with GNU General Public License v3.0

6 votes

PageMeta: React.FC<{ symbol?: string }> = ({ symbol }) => {
  const { t } = useTranslation()
  const { pathname } = useLocation()
  const cakePriceUsd = useCakeUsdcPrice()
  const cakePriceUsdDisplay = cakePriceUsd ? `$${cakePriceUsd.toFixed(3)}` : '...'

  const pageMeta = getCustomMeta(pathname, t) || {}
  const { title, description, image } = { ...DEFAULT_META, ...pageMeta }
  let pageTitle = cakePriceUsdDisplay ? [title, cakePriceUsdDisplay].join(' - ') : title
  if (symbol) {
    pageTitle = [symbol, title].join(' - ')
  }

  return (
    <Helmet>
      <title>{pageTitle}</title>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
    </Helmet>
  )
}

Example #19

Source File: Home.tsx From akashlytics with GNU General Public License v3.0

6 votes

Home: React.FunctionComponent<IHomeProps> = ({}) => {
  const { data: dashboardData, status } = useDashboardData();
  const classes = useStyles();
  const mediaQuery = useMediaQueryContext();

  return (
    <>
      <Helmet title="Dashboard" />
      <div className={clsx("container")}>
        {dashboardData ? (
          <>
            <Dashboard dashboardData={dashboardData} />

            <div className="row mt-5">
              <div
                className={clsx("col-12", classes.refreshDate, {
                  "text-center": mediaQuery.smallScreen
                })}
              >
                Last updated: <FormattedDate value={dashboardData.now.date} /> <FormattedTime value={dashboardData.now.date} />
              </div>
            </div>
          </>
        ) : (
          <div className="text-center">
            <CircularProgress size={80} />
          </div>
        )}
      </div>
    </>
  );
}

Example #20

Source File: index.tsx From react-pokedex with MIT License

6 votes

ReactDOM.render(
  <React.StrictMode>
    <HelmetProvider>
      <Helmet>
        <meta charSet="utf-8" />
        <title>React Pokédex</title>
        <meta
          name="description"
          content="a simple pokédex for your pokemon needs."
        />
      </Helmet>
      <Provider store={store}>
        <App />
      </Provider>
    </HelmetProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Example #21

Source File: Page.tsx From vvs-ui with GNU General Public License v3.0

6 votes

OpenGraphTag = ({ title, description, canonical, ogImageUrl, siteName }: OpenGraphMeta) => {
  // if (!ogImageUrl) return null

  return (
    <Helmet>
      <meta name="og:title" content={title} />
      <meta name="og:image" content={ogImageUrl} />
      <meta name="og:url" content={canonical} />
      <meta name="og:description" content={description} />
      <meta name="og:type" content="website" />
      <meta name="og:site_name" content={siteName} />
    </Helmet>
  )
}

Example #22

Source File: HtmlMeta.tsx From mkn with MIT License

6 votes

HtmlMeta: React.FC<IProps> = (props) => {
  const siteName = props.disableSiteName ? '' : ` - ${config.app.NAME}`;

  return (
    <Helmet>
      <title>
        {props.title || ''}
        {siteName}
      </title>
    </Helmet>
  );
}

Example #23

Source File: HelmetSocial.tsx From akashlytics with GNU General Public License v3.0

6 votes

HelmetSocial: React.FunctionComponent<IHelmetSocialProps> = (props) => {
  const {
    title,
    description,
    children,
    googleImageUrl,
    twitterImageUrl,
    otherImageUrl,
    otherImageWidth,
    otherImageHeight,
  } = props;

  return (
    <Helmet>
      <title>{title}</title>
      {description && <meta name="description" content={description} />}

      {/* Google Plus */}
      <meta itemProp="name" content={title} />
      {description && <meta itemProp="description" content={description} />}
      {googleImageUrl && <meta itemProp="image" content={googleImageUrl} />}

      {/* Twitter */}
      <meta name="twitter:title" content={title} />
      {description && <meta name="twitter:description" content={description} />}
      {twitterImageUrl && <meta name="twitter:image:alt" content={title} />}
      {twitterImageUrl && <meta name="twitter:image" content={twitterImageUrl} />}

      {/* Others */}
      <meta property="og:title" content={title} />
      {description && <meta property="og:description" content={description} />}
      {otherImageUrl && <meta property="og:image" content={otherImageUrl} />}
      {otherImageUrl && <meta property="og:image:width" content={otherImageWidth.toString()} />}
      {otherImageUrl && <meta property="og:image:height" content={otherImageHeight.toString()} />}

      {children}
    </Helmet>
  );
}

Example #24

Source File: index.tsx From datart with Apache License 2.0

5 votes

export function App() {
  const dispatch = useDispatch();
  const { i18n } = useTranslation();
  const logged = !!getToken();
  const t = useI18NPrefix('global');
  useAppSlice();

  useLayoutEffect(() => {
    if (logged) {
      dispatch(setLoggedInUser());
    } else {
      if (localStorage.getItem(StorageKeys.LoggedInUser)) {
        message.warning(t('tokenExpired'));
      }
      dispatch(logout());
    }
  }, [dispatch, t, logged]);

  useEffect(() => {
    dispatch(getSystemInfo());
  }, [dispatch]);

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          titleTemplate="%s - Datart"
          defaultTitle="Datart"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route path="/login" component={LazyLoginPage} />
          <Route path="/register" component={LazyRegisterPage} />
          <Route path="/active" component={LazyActivePage} />
          <Route path="/forgetPassword" component={LazyForgetPasswordPage} />
          <Route
            path="/authorization/:token"
            component={LazyAuthorizationPage}
          />
          <LoginAuthRoute />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Example #25

Source File: index.tsx From vvs-ui with GNU General Public License v3.0

5 votes

Predictions = () => {
  const { isDesktop } = useMatchBreakpoints()
  const [hasAcceptedRisk, setHasAcceptedRisk] = useUserPredictionAcceptedRisk()
  const [showDisclaimer] = useUserPredictionChartDisclaimerShow()
  const { account } = useWeb3React()
  const status = useGetPredictionsStatus()
  const isChartPaneOpen = useIsChartPaneOpen()
  const dispatch = useAppDispatch()
  const initialBlock = useInitialBlock()
  const handleAcceptRiskSuccess = () => setHasAcceptedRisk(true)
  const [onPresentRiskDisclaimer] = useModal(<RiskDisclaimer onSuccess={handleAcceptRiskSuccess} />, false)
  const [onPresentChartDisclaimer] = useModal(<ChartDisclaimer />, false)

  // TODO: memoize modal's handlers
  const onPresentRiskDisclaimerRef = useRef(onPresentRiskDisclaimer)
  const onPresentChartDisclaimerRef = useRef(onPresentChartDisclaimer)

  // Disclaimer
  useEffect(() => {
    if (!hasAcceptedRisk) {
      onPresentRiskDisclaimerRef.current()
    }
  }, [hasAcceptedRisk, onPresentRiskDisclaimerRef])

  // Chart Disclaimer
  useEffect(() => {
    if (isChartPaneOpen && showDisclaimer) {
      onPresentChartDisclaimerRef.current()
    }
  }, [onPresentChartDisclaimerRef, isChartPaneOpen, showDisclaimer])

  useEffect(() => {
    if (initialBlock > 0) {
      // Do not start initialization until the first block has been retrieved
      dispatch(initializePredictions(account))
    }
  }, [initialBlock, dispatch, account])

  usePollPredictions()
  usePollOraclePrice()

  if (status === PredictionStatus.INITIAL) {
    return <PageLoader />
  }

  return (
    <>
      <Helmet>
        <script src="https://s3.tradingview.com/tv.js" type="text/javascript" id="tradingViewWidget" />
      </Helmet>
      <SEOHead />
      <SwiperProvider>
        <Container>
          {isDesktop ? <Desktop /> : <Mobile />}
          <CollectWinningsPopup />
        </Container>
      </SwiperProvider>
    </>
  )
}

Example #26

Source File: Meta.tsx From react-pwa with MIT License

5 votes

function Meta({
  description = defaultMetaTags.description,
  meta = [],
  title,
  image = defaultMetaTags.image,
}: MetaProps) {
  const pageTitle = `${appTitle}${title ? ' | ' + title : ''}`;

  return (
    <Helmet
      title={pageTitle}
      meta={[
        {
          name: 'description',
          content: description,
        },
        {
          property: 'og:title',
          content: pageTitle,
        },
        {
          property: 'og:description',
          content: description,
        },
        {
          property: 'og:type',
          content: 'website',
        },
        {
          property: 'og:image',
          content: image,
        },
        {
          name: 'twitter:card',
          content: 'summary',
        },
        {
          name: 'twitter:title',
          content: pageTitle,
        },
        {
          name: 'twitter:description',
          content: description,
        },
      ].concat(meta)}
    />
  );
}

Example #27

Source File: task.tsx From leek with Apache License 2.0

5 votes

TaskPage: React.FC = () => {
  // STATE
  const service = new TaskService();
  const { currentApp } = useApplication();
  const [qpTaskUUID, setQPTaskUUID] = useQueryParam("uuid", StringParam);
  const [task, setTask] = useState({});

  // Data
  const [loading, setLoading] = useState<boolean>(false);

  // API Calls
  function getTaskByUUID(uuid: string) {
    if (!currentApp) return;
    setLoading(true);
    service
      .getById(currentApp, uuid)
      .then(handleAPIResponse)
      .then((result: any) => {
        if (result.hits.hits.length > 0) {
          setTask(result.hits.hits[0]._source);
        }
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => setLoading(false));
  }

  useEffect(() => {
    // Stop refreshing metadata
    if (timeout) clearInterval(timeout);
    if (qpTaskUUID) {
      getTaskByUUID(qpTaskUUID);
    }
    timeout = setInterval(() => {
      if (qpTaskUUID) {
        getTaskByUUID(qpTaskUUID);
      }
    }, 5000);

    return () => {
      clearInterval(timeout);
    };
  }, []);

  return (
    <>
      <Helmet>
        <html lang="en" />
        <title>Task detail</title>
        <meta name="description" content="Task details" />
        <meta name="keywords" content="celery, task" />
      </Helmet>

      <Row
        justify="center"
        style={{ marginTop: "20px", width: "100%" }}
        gutter={[12, 12]}
      >
        {task && Object.keys(task).length > 0 && (
          <TaskDetails task={task} loading={loading} />
        )}

        {task && Object.keys(task).length === 0 && (
          <Empty description={<Title level={3}>Waiting task...</Title>} />
        )}
      </Row>
    </>
  );
}

Example #28

Source File: Error.tsx From cra-serverless with MIT License

5 votes

NotFound = () => (
  <>
    <Helmet>
      <title>Not Found</title>
    </Helmet>
    <h2>Not Found</h2>
  </>
)

Example #29

Source File: index.tsx From WEB_CodeSquare_AmongUs with MIT License

5 votes

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <HelmetProvider>
        <BrowserRouter>
          <Helmet>
            <link
              rel="apple-touch-icon"
              sizes="180x180"
              href="/apple-touch-icon.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="32x32"
              href="/favicon-32x32.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="16x16"
              href="/favicon-16x16.png"
            />
            <link rel="manifest" href="/site.webmanifest" />
            <link
              rel="mask-icon"
              href="/safari-pinned-tab.svg"
              color="#5bbad5"
            />
            <meta name="msapplication-TileColor" content="#2b5797" />
            <meta name="theme-color" content="#ffffff" />
          </Helmet>
          <Global styles={GlobalStyles} />
          <App />
        </BrowserRouter>
      </HelmetProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root"),
);