added translations

Author: sachin-panayil

frontend/src/components/Header.tsx

@@ -113,7 +113,7 @@ export const Header = ({ hideLinks }: HeaderProps) => {
                   <>
                     <li className="usa-nav__primary-item">
                       <a href="/search" className="usa-nav__link">
-                        <span>Search the Data</span>
+                        <span>{t("header.link.search")}</span>
                       </a>
                     </li>
                     <li className="usa-nav__primary-item">

frontend/src/i18n/en/index.ts

@@ -6,6 +6,7 @@ import landing from "./landing.json"
 import organizations from "./organizations.json"
 import patients from "./patients.json"
 import practitioners from "./practitioners.json"
+import search from "./search.json"
 
 /*
  * NOTE: (@abachman-dsac) a word about i18n usage in react components and the
@@ -37,4 +38,5 @@ export const translations = {
   organizations,
   patients,
   practitioners,
+  search
 }

frontend/src/i18n/en/landing.json

@@ -12,7 +12,8 @@
   "links": {
     "developers": "Developer resources",
     "providers": "Provider resources",
-    "learn": "Learn how it works"
+    "learn": "Learn how it works",
+    "search": "Search the data"
   },
   "authentication": {
     "error": {

frontend/src/i18n/en/search.json

@@ -0,0 +1,7 @@
+{
+    "title": "Search the data",
+    "subtitle": "Search the National Provider Directory to find practitioners and organizations.",
+    "practitioner": "Practitioner",
+    "organization": "Organization"
+}
+  

frontend/src/pages/Landing/Landing.tsx

@@ -37,7 +37,7 @@ export const Landing = () => {
                     {t("landing.links.developers")}
                   </Button>
                   <Button variation="solid" href="/search">
-                    Search the Data
+                    {t("landing.links.search")}
                   </Button>
                 </div>
               </div>

frontend/src/pages/Search/Search.tsx

@@ -2,20 +2,22 @@ import { Button } from "@cmsgov/design-system"
 import classNames from "classnames"
 import { TitlePanel } from "../../components/TitlePanel"
 import layout from "../Layout.module.css"
+import { useTranslation } from "react-i18next"
 
 export const Search = () => {
+  const { t } = useTranslation()
   const contentClass = classNames(layout.content, "ds-l-container")
 
   return (
     <>
       <TitlePanel
-        title="Search the Data"
+        title={t("search.title")}
         className={layout.compactLeader}
       >
         <div className="ds-l-row">
           <div className="ds-l-col--12 ds-u-margin-bottom--4">
             <p>
-              Search the National Provider Directory to find practitioners and organizations.
+            {t("search.subtitle")}
             </p>
           </div>
         </div>
@@ -25,10 +27,10 @@ export const Search = () => {
         <div className="ds-l-row">
           <div className="ds-l-col--12 ds-u-display--flex ds-u-justify-content--center ds-u-margin-bottom--6">
             <Button variation="solid" size="big" href="/practitioners/search" className="ds-u-margin-right--2">
-              Practitioner
+            {t("search.practitioner")}
             </Button>
             <Button variation="solid" size="big" href="/organizations/search">
-              Organization
+            {t("search.organization")}
             </Button>
           </div>
         </div>