Update global components for the app router

frontend/src/components/BetaAlert.tsx

@@ -1,51 +1,20 @@
-"use client";
+import { useTranslations } from "next-intl";
 
-import Link from "next/link";
-
-import { ExternalRoutes } from "src/constants/routes";
 import FullWidthAlert from "./FullWidthAlert";
 
-// TODO: Remove for i18n update.
-type BetaStrings = {
-  alert_title: string;
-  alert: string;
-};
-
-type Props = {
-  beta_strings: BetaStrings;
-};
-
-const BetaAlert = ({ beta_strings }: Props) => {
-  // TODO: Remove during move to app router and next-intl upgrade
-  const title_start = beta_strings.alert_title.substring(
-    0,
-    beta_strings.alert_title.indexOf("<LinkToGrants>"),
-  );
-  const title_end = beta_strings.alert_title.substring(
-    beta_strings.alert_title.indexOf("</LinkToGrants>") +
-      "</LinkToGrants>".length,
-  );
-  const link = (
-    <>
-      {title_start}
-      <Link
-        target="_blank"
-        rel="noopener noreferrer"
-        href={ExternalRoutes.GRANTS_HOME}
-      >
-        www.grants.gov
-      </Link>
-      {title_end}
-    </>
-  );
+const BetaAlert = () => {
+  const t = useTranslations("Beta_alert");
+  const heading = t.rich("alert_title", {
+    LinkToGrants: (content) => <a href="https://www.grants.gov">{content}</a>,
+  });
 
   return (
     <div
       data-testid="beta-alert"
       className="desktop:position-sticky top-0 z-200"
     >
-      <FullWidthAlert type="info" heading={link}>
-        {beta_strings.alert}
+      <FullWidthAlert type="info" heading={heading}>
+        {t("alert")}
       </FullWidthAlert>
     </div>
   );

frontend/src/components/Footer.tsx

@@ -1,86 +1,73 @@
-"use client";
-
 import { ExternalRoutes } from "src/constants/routes";
-import { assetPath } from "src/utils/assetPath";
+import { useTranslations } from "next-intl";
+import { USWDSIcon } from "src/components/USWDSIcon";
+import GrantsLogo from "public/img/grants-gov-logo.png";
+
+import Image from "next/image";
 
-import { ComponentType } from "react";
 import {
   Address,
   Grid,
   GridContainer,
-  Icon,
   SocialLinks,
   Footer as USWDSFooter,
 } from "@trussworks/react-uswds";
-import { IconProps } from "@trussworks/react-uswds/lib/components/Icon/Icon";
 
 // Recreate @trussworks/react-uswds SocialLink component to accept any Icon
 // https://github.com/trussworks/react-uswds/blob/cf5b4555e25f0e52fc8af66afe29253922bed2a5/src/components/Footer/SocialLinks/SocialLinks.tsx#L33
 type SocialLinkProps = {
   href: string;
   name: string;
-  Tag: ComponentType<IconProps>;
+  icon: string;
 };
 
-const SocialLink = ({ href, name, Tag }: SocialLinkProps) => (
+const SocialLink = ({ href, name, icon }: SocialLinkProps) => (
   <a className="usa-social-link" href={href} title={name} target="_blank">
-    <Tag className="usa-social-link__icon" name={name} aria-label={name} />
+    <USWDSIcon
+      className="usa-icon usa-social-link__icon"
+      height="40px"
+      name={icon}
+      aria-label={name}
+    />
   </a>
 );
 
-// TODO: Remove during move to app router and next-intl upgrade
-type FooterStrings = {
-  agency_name: string;
-  agency_contact_center: string;
-  telephone: string;
-  return_to_top: string;
-  link_twitter: string;
-  link_youtube: string;
-  link_blog: string;
-  link_newsletter: string;
-  link_rss: string;
-  link_github: string;
-  logo_alt: string;
-};
-
-type Props = {
-  footer_strings: FooterStrings;
-};
+const Footer = () => {
+  const t = useTranslations("Footer");
 
-const Footer = ({ footer_strings }: Props) => {
   const links = [
     {
       href: ExternalRoutes.GRANTS_TWITTER,
-      name: footer_strings.link_twitter,
-      Tag: Icon.Twitter,
+      name: t("link_twitter"),
+      icon: "twitter",
     },
     {
       href: ExternalRoutes.GRANTS_YOUTUBE,
-      name: footer_strings.link_youtube,
-      Tag: Icon.Youtube,
+      name: t("link_youtube"),
+      icon: "youtube",
     },
     {
       href: ExternalRoutes.GRANTS_BLOG,
-      name: footer_strings.link_blog,
-      Tag: Icon.LocalLibrary,
+      name: t("link_blog"),
+      icon: "local_library",
     },
     {
       href: ExternalRoutes.GRANTS_NEWSLETTER,
-      name: footer_strings.link_newsletter,
-      Tag: Icon.Mail,
+      name: t("link_newsletter"),
+      icon: "mail",
     },
     {
       href: ExternalRoutes.GRANTS_RSS,
-      name: footer_strings.link_rss,
-      Tag: Icon.RssFeed,
+      name: t("link_rss"),
+      icon: "rss_feed",
     },
     {
       href: ExternalRoutes.GITHUB_REPO,
-      name: footer_strings.link_github,
-      Tag: Icon.Github,
+      name: t("link_github"),
+      icon: "github",
     },
-  ].map(({ href, name, Tag }) => (
-    <SocialLink href={href} key={name} name={name} Tag={Tag} />
+  ].map(({ href, name, icon }) => (
+    <SocialLink href={href} key={name} name={name} icon={icon} />
   ));
 
   return (
@@ -89,17 +76,20 @@ const Footer = ({ footer_strings }: Props) => {
       size="medium"
       returnToTop={
         <GridContainer className="usa-footer__return-to-top margin-top-5">
-          <a href="#">{footer_strings.return_to_top}</a>
+          <a href="#">{t("return_to_top")}</a>
         </GridContainer>
       }
       primary={null}
       secondary={
         <Grid row gap>
           <Grid tablet={{ col: 4 }} desktop={{ col: 6 }}>
-            <img
+            <Image
               className="maxh-15 margin-bottom-2 tablet:margin-bottom-0"
-              alt={footer_strings.logo_alt}
-              src={assetPath("/img/grants-gov-logo.png")}
+              alt={t("logo_alt")}
+              src={GrantsLogo}
+              height={168}
+              width={500}
+              priority={false}
             />
           </Grid>
           <Grid
@@ -109,13 +99,13 @@ const Footer = ({ footer_strings }: Props) => {
           >
             <SocialLinks links={links} />
             <h2 className="usa-footer__contact-heading">
-              {footer_strings.agency_contact_center}
+              {t("agency_contact_center")}
             </h2>
             <Address
               size="medium"
               items={[
-                <a key="telephone" href={`tel:${footer_strings.telephone}`}>
-                  {footer_strings.telephone}
+                <a key="telephone" href={`tel:${t("telephone")}`}>
+                  {t("telephone")}
                 </a>,
                 <a key="email" href={`mailto:${ExternalRoutes.EMAIL_SUPPORT}`}>
                   {ExternalRoutes.EMAIL_SUPPORT}

frontend/src/components/GrantsIdentifier.tsx

@@ -1,8 +1,7 @@
-"use client";
-
 import { ExternalRoutes } from "src/constants/routes";
 
-import { Trans, useTranslation } from "next-i18next";
+import { useTranslations } from "next-intl";
+
 import Image from "next/image";
 import {
   Identifier,
@@ -16,28 +15,21 @@ import {
   IdentifierMasthead,
 } from "@trussworks/react-uswds";
 
-import logo from "../../public/img/logo-white-lg.webp";
+import logo from "public/img/logo-white-lg.webp";
 
-// TODO: Remove during move to app router and next-intl upgrade
-type IdentifierStrings = {
-  link_about: string;
-  link_accessibility: string;
-  link_foia: string;
-  link_fear: string;
-  link_ig: string;
-  link_performance: string;
-  link_privacy: string;
-  logo_alt: string;
-};
-
-type Props = {
-  identifier_strings: IdentifierStrings;
-};
+const GrantsIdentifier = () => {
+  const t = useTranslations("Identifier");
 
-const GrantsIdentifier = ({ identifier_strings }: Props) => {
-  const { t } = useTranslation("common", {
-    keyPrefix: "Identifier",
-  });
+  const identifier_strings = {
+    link_about: t("link_about"),
+    link_accessibility: t("link_accessibility"),
+    link_foia: t("link_foia"),
+    link_fear: t("link_fear"),
+    link_ig: t("link_ig"),
+    link_performance: t("link_performance"),
+    link_privacy: t("link_privacy"),
+    logo_alt: t("logo_alt"),
+  };
 
   const logoImage = (
     <Image
@@ -91,26 +83,18 @@ const GrantsIdentifier = ({ identifier_strings }: Props) => {
           <IdentifierLogo href="#">{logoImage}</IdentifierLogo>
         </IdentifierLogos>
         <IdentifierIdentity domain="HHS.gov">
-          <Trans
-            t={t}
-            i18nKey="identity"
-            components={{
-              hhsLink: <a href={ExternalRoutes.HHS} />,
-            }}
-          />
+          {t.rich("identity", {
+            hhsLink: (chunks) => <a href={ExternalRoutes.HHS}>{chunks}</a>,
+          })}
         </IdentifierIdentity>
       </IdentifierMasthead>
       <IdentifierLinks navProps={{ "aria-label": "Important links" }}>
         {IdentifierLinkList}
       </IdentifierLinks>
       <IdentifierGov aria-label="U.S. government information and services">
-        <Trans
-          t={t}
-          i18nKey="gov_content"
-          components={{
-            usaLink: <a href={ExternalRoutes.USA} />,
-          }}
-        />
+        {t.rich("gov_content", {
+          usaLink: (chunks) => <a href={ExternalRoutes.USA}>{chunks}</a>,
+        })}
       </IdentifierGov>
     </Identifier>
   );