feat: support for Chrome Web Store

src/components/Welcome.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react-icons/fa';
 import { IoIosBeer, IoMdAppstore } from 'react-icons/io';
 import { MdDomain } from 'react-icons/md';
-import { RiBuilding2Fill, RiNpmjsFill } from 'react-icons/ri';
+import { RiBuilding2Fill, RiChromeFill, RiNpmjsFill } from 'react-icons/ri';
 import {
   SiAppstore,
   SiArchlinux,
@@ -60,6 +60,7 @@ const supportedProviders: Record<string, React.ReactNode> = {
   githubSearch: <FaGithubAlt />,
   appStore: <SiAppstore />,
   playStore: <IoMdAppstore />,
+  chromeWebStore: <RiChromeFill />,
   nta: <RiBuilding2Fill />,
 };
 

src/components/cards/index.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { mobile } from '../../util/css';
 import AppStoreCard from './providers/AppStore';
+import ChromeWebStoreCard from './providers/ChromeWebStore';
 import CloudflareCard from './providers/Cloudflare';
 import CratesioCard from './providers/Cratesio';
 import DomainCard from './providers/Domains';
@@ -64,6 +65,7 @@ const Index: React.FC<{ query: string }> = ({ query }) => {
         <GithubSearchCard query={query} />
         <AppStoreCard query={query} />
         <PlayStoreCard query={query} />
+        <ChromeWebStoreCard query={query} />
         {language === 'ja' ? <NtaCard query={query} /> : null}
       </Cards>
     </>

src/components/cards/providers/ChromeWebStore.tsx

@@ -0,0 +1,54 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { RiChromeFill } from 'react-icons/ri';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/chrome-web-store/${encodeURIComponent(query)}`
+  ) as {
+    result: Array<{
+      name: string;
+      url: string;
+      description: string;
+      id: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name}
+            message={app.description}
+            link={app.url}
+            icon={<RiChromeFill />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<RiChromeFill />}
+        />
+      )}
+    </>
+  );
+};
+
+const ChromeWebStoreCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.chromeWebStore')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default ChromeWebStoreCard;

src/util/i18n.ts

@@ -5,7 +5,7 @@ import XHR from 'i18next-xhr-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
-const TRANSLATION_VERSION = '10';
+const TRANSLATION_VERSION = '11';
 
 i18n
   .use(Backend)