feat: add nta

web/src/components/Welcome.js

@@ -14,6 +14,7 @@ import {
   FaSlack,
   FaAws,
   FaJsSquare,
+  FaBuilding,
 } from 'react-icons/fa'
 import { IoIosBeer } from 'react-icons/io'
 import { DiRust, DiHeroku } from 'react-icons/di'
@@ -82,6 +83,9 @@ export default function Welcome() {
         <ListItem>
           <FaAppStore /> {t('providers.appStore')}
         </ListItem>
+        <ListItem>
+          <FaBuilding /> {t('providers.nta')}
+        </ListItem>
       </List>
     </Container>
   )

web/src/components/cards/appstore.js

@@ -26,7 +26,7 @@ function Search({ query }) {
           />
         ))
       ) : (
-        <Result title="No Result" icon={<FaInfoCircle />} />
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
       )}
     </>
   )

web/src/components/cards/github-search.js

@@ -6,6 +6,7 @@ import { FaGithub, FaInfoCircle } from 'react-icons/fa'
 import { Card, Result } from '../Cards'
 
 function Search({ query }) {
+  const { t } = useTranslation()
   const searchQuery = encodeURIComponent(`${query} in:name`)
   const limit = 10
   const response = useFetch(
@@ -28,7 +29,7 @@ function Search({ query }) {
           />
         ))
       ) : (
-        <Result title="No Result" icon={<FaInfoCircle />} />
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
       )}
     </>
   )

web/src/components/cards/nta.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { useTranslation } from 'react-i18next'
+import { FaBuilding, FaInfoCircle } from 'react-icons/fa'
+
+import { Card, Result } from '../Cards'
+
+function Search({ query }) {
+  const { t } = useTranslation()
+  const term = encodeURIComponent(query)
+  const response = useFetch(`/availability/nta/${term}`)
+  const apps = response.result
+
+  return (
+    <>
+      {apps.length > 0 ? (
+        apps.map((app, i) => (
+          <Result
+            title={app.name}
+            message={`Phonetic: ${app.phoneticName}`}
+            icon={<FaBuilding />}
+            key={i}
+          />
+        ))
+      ) : (
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
+      )}
+    </>
+  )
+}
+
+export default function NtaCard({ query }) {
+  const { t } = useTranslation()
+
+  return (
+    <Card title={t('providers.nta')}>
+      <Search query={query} />
+    </Card>
+  )
+}