feat: add legend

web/public/locales/en/translation.json

@@ -32,5 +32,7 @@
   "showMore": "show more",
   "noResult": "No Result",
   "gettingStarted": "Getting Started",
-  "pressEnterToSearch": "Press Enter to search"
+  "pressEnterToSearch": "Press Enter to search",
+  "available": "Available",
+  "unavailable": "Unavailable"
 }

web/public/locales/ja/translation.json

@@ -32,5 +32,7 @@
   "showMore": "もっと見る",
   "noResult": "該当なし",
   "gettingStarted": "試してみる",
-  "pressEnterToSearch": "エンターキーで検索"
+  "pressEnterToSearch": "エンターキーで検索",
+  "available": "取得可能",
+  "unavailable": "取得済み"
 }

web/src/App.tsx

@@ -3,10 +3,18 @@ import styled, {createGlobalStyle} from 'styled-components';
 import {Helmet} from 'react-helmet';
 import {useTranslation} from 'react-i18next';
 import {Switch, Route, useParams, Redirect} from 'react-router-dom';
+import {IoIosRocket, IoIosFlash} from 'react-icons/io';
 
 import Welcome from './components/Welcome';
 import Form from './components/Form';
 import Cards from './components/cards';
+import {
+  ResultItem,
+  ResultIcon,
+  ResultName,
+  COLORS,
+  AvailableIcon,
+} from './components/cards/core';
 import Footer from './components/Footer';
 
 import {mobile} from './util/css';
@@ -54,6 +62,7 @@ function Home() {
 function Search() {
   const {query} = useParams<{query: string}>();
   const currentQuery = sanitize(query);
+  const {t} = useTranslation();
 
   return (
     <>
@@ -63,6 +72,23 @@ function Search() {
       <Header>
         <Form initialValue={currentQuery} />
       </Header>
+      <Legend>
+        <ResultItem color={COLORS.available}>
+          <ResultIcon>
+            <IoIosRocket />
+          </ResultIcon>
+          <ResultName>{t('available')}</ResultName>
+          <AvailableIcon>
+            <IoIosFlash />
+          </AvailableIcon>
+        </ResultItem>
+        <ResultItem color={COLORS.unavailable}>
+          <ResultIcon>
+            <IoIosRocket />
+          </ResultIcon>
+          <ResultName>{t('unavailable')}</ResultName>
+        </ResultItem>
+      </Legend>
       <Content>
         <Cards query={currentQuery} />
       </Content>
@@ -70,6 +96,27 @@ function Search() {
   );
 }
 
+const Legend = styled.div`
+  padding: 80px 0 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  user-select: none;
+  cursor: default;
+  background-color: #f6f6fa;
+
+  ${mobile} {
+    padding: 60px 0 20px;
+    align-items: center;
+    flex-direction: column;
+    background-color: none;
+  }
+
+  ${ResultItem} {
+    margin: 0 20px 0;
+  }
+`;
+
 const GlobalStyle = createGlobalStyle`
 * {
   box-sizing: border-box;
@@ -89,7 +136,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: #ffffff;
-  
+
   ${mobile} {
     background: #f5f5f5;
   }
@@ -97,10 +144,10 @@ body {
 `;
 
 const Content = styled.div`
-  padding-top: 100px;
+  /* padding-top: 100px; */
 
   ${mobile} {
-    padding-top: 60px;
+    /* padding-top: 60px; */
   }
 `;
 

web/src/components/cards/core.tsx

@@ -12,7 +12,7 @@ import {OutboundLink} from 'react-ga';
 import {sendError, sendExpandEvent} from '../../util/analytics';
 import {mobile} from '../../util/css';
 
-const COLORS = {
+export const COLORS = {
   available: '#6e00ff',
   unavailable: 'darkgrey',
   error: '#ff388b',
@@ -205,7 +205,8 @@ export const Result: React.FC<{
         position="bottom"
         arrow={true}
         animation="shift"
-        duration="200">
+        duration="200"
+      >
         <ResultItem color={itemColor}>
           <ResultIcon>{icon}</ResultIcon>
           <ResultName>
@@ -213,7 +214,8 @@ export const Result: React.FC<{
               <OutboundLink
                 to={link}
                 eventLabel={link.split('/')[2]}
-                target="_blank">
+                target="_blank"
+              >
                 {content}
               </OutboundLink>
             ) : (
@@ -270,7 +272,8 @@ class ErrorBoundary extends React.Component<
             position="bottom"
             arrow={true}
             animation="shift"
-            duration="200">
+            duration="200"
+          >
             <ResultItem color={COLORS.error}>
               <ResultIcon>
                 <GoInfo />
@@ -292,7 +295,8 @@ const ErrorHandler: React.FC = ({children}) => (
         <ResultContainer>
           <BarLoader />
         </ResultContainer>
-      }>
+      }
+    >
       {children}
     </Suspense>
   </ErrorBoundary>
@@ -351,11 +355,11 @@ const ResultContainer = styled.div`
   padding: 4px 0;
 `;
 
-const ResultIcon = styled.div`
+export const ResultIcon = styled.div`
   width: 1em;
 `;
 
-const ResultItem = styled.div`
+export const ResultItem = styled.div`
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -363,7 +367,7 @@ const ResultItem = styled.div`
   color: ${({color}) => color};
 `;
 
-const ResultName = styled.div`
+export const ResultName = styled.div`
   margin-left: 6px;
   font-family: monospace;
 
@@ -373,7 +377,7 @@ const ResultName = styled.div`
   }
 `;
 
-const AvailableIcon = styled.div`
+export const AvailableIcon = styled.div`
   margin-top: 2px;
   margin-left: 3px;
   padding: 0;

web/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 = '1.12';
+const TRANSLATION_VERSION = '1.13';
 
 i18n
   .use(Backend)