feat: google search card

web/src/App.js

@@ -11,12 +11,13 @@ import RubyGemsCard from './components/cards/RubyGemsCard'
 import CratesioCard from './components/cards/CratesioCard'
 import HomebrewCard from './components/cards/HomebrewCard'
 import LinuxCard from './components/cards/LinuxCard'
-import GithubSearchCard from './components/cards/GithubSearchCard'
-import AppStoreCard from './components/cards/AppStoreCard'
 import TwitterCard from './components/cards/TwitterCard'
 import SlackCard from './components/cards/SlackCard'
 import S3Card from './components/cards/S3Card'
 import JsOrgCard from './components/cards/JsOrgCard'
+import GithubSearchCard from './components/cards/GithubSearchCard'
+import AppStoreCard from './components/cards/AppStoreCard'
+import GoogleCard from './components/cards/GoogleCard'
 
 import { EventReporter } from './components/Analytics'
 import Welcome from './components/Welcome'
@@ -104,8 +105,11 @@ export default function App() {
               <SlackCard query={query} />
               <S3Card query={query} />
               <JsOrgCard query={query} />
+            </Cards>
+            <Cards>
               <GithubSearchCard query={query} />
               <AppStoreCard query={query} />
+              <GoogleCard query={query} />
             </Cards>
             <EventReporter query={query} />
           </SearchResult>

web/src/components/cards/GoogleCard.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { useTranslation } from 'react-i18next'
+import { FaGoogle, FaInfoCircle } from 'react-icons/fa'
+
+import { Card, Result } from '../Cards'
+
+function Search({ query }) {
+  const term = `${query} app service -twitter -facebook -amazon -vimeo -linkedin -site:dictionary.cambridge.org -site:weblio.jp -site:appbank.net -いかがでした -キャンペーン`
+  const response = useFetch(`/availability/google/${encodeURIComponent(term)}`)
+  const items = response.result
+
+  return (
+    <>
+      {items.length > 0 ? (
+        items.map((item, i) => (
+          <Result
+            title={item.title}
+            message={item.link}
+            link={item.link}
+            icon={<FaGoogle />}
+            key={i}
+          />
+        ))
+      ) : (
+        <Result title="No Result" icon={<FaInfoCircle />} />
+      )}
+    </>
+  )
+}
+
+export default function GoogleCard({ query }) {
+  const { t } = useTranslation()
+
+  return (
+    <Card title={t('providers.google')}>
+      <Search query={query} />
+    </Card>
+  )
+}