From 2438518e3c051e27c231ca380b1a85810462fc58 Mon Sep 17 00:00:00 2001
From: Yasuaki Uechi <y@uechi.io>
Date: Mon, 2 Sep 2019 19:41:44 +0900
Subject: [PATCH] chore: move components into separated files

---
 web/src/App.tsx                               | 170 ++----------------
 web/src/components/Form.tsx                   | 112 ++++++++++++
 .../cards/{appstore.tsx => AppStore.tsx}      |   2 +-
 .../cards/{cratesio.tsx => Cratesio.tsx}      |   2 +-
 .../cards/{domains.tsx => Domains.tsx}        |   2 +-
 ...ub-repository.tsx => GitHubRepository.tsx} |   2 +-
 .../{github-search.tsx => GitHubSearch.tsx}   |   2 +-
 .../cards/{heroku.tsx => Heroku.tsx}          |   2 +-
 .../cards/{homebrew.tsx => Homebrew.tsx}      |   2 +-
 .../components/cards/{jsorg.tsx => JsOrg.tsx} |   2 +-
 .../components/cards/{linux.tsx => Linux.tsx} |   2 +-
 web/src/components/cards/{now.tsx => Now.tsx} |   2 +-
 web/src/components/cards/{npm.tsx => Npm.tsx} |   2 +-
 web/src/components/cards/{nta.tsx => Nta.tsx} |   2 +-
 .../components/cards/{pypi.tsx => PyPI.tsx}   |   2 +-
 .../cards/{rubygems.tsx => RubyGems.tsx}      |   2 +-
 web/src/components/cards/{s3.tsx => S3.tsx}   |   2 +-
 .../components/cards/{slack.tsx => Slack.tsx} |   2 +-
 .../cards/{spectrum.tsx => Spectrum.tsx}      |   2 +-
 .../cards/{twitter.tsx => Twitter.tsx}        |   2 +-
 .../components/{Cards.tsx => cards/core.tsx}  |   4 +-
 web/src/components/cards/index.tsx            |  69 +++++++
 22 files changed, 211 insertions(+), 180 deletions(-)
 create mode 100644 web/src/components/Form.tsx
 rename web/src/components/cards/{appstore.tsx => AppStore.tsx} (96%)
 rename web/src/components/cards/{cratesio.tsx => Cratesio.tsx} (91%)
 rename web/src/components/cards/{domains.tsx => Domains.tsx} (93%)
 rename web/src/components/cards/{github-repository.tsx => GitHubRepository.tsx} (94%)
 rename web/src/components/cards/{github-search.tsx => GitHubSearch.tsx} (97%)
 rename web/src/components/cards/{heroku.tsx => Heroku.tsx} (91%)
 rename web/src/components/cards/{homebrew.tsx => Homebrew.tsx} (95%)
 rename web/src/components/cards/{jsorg.tsx => JsOrg.tsx} (92%)
 rename web/src/components/cards/{linux.tsx => Linux.tsx} (93%)
 rename web/src/components/cards/{now.tsx => Now.tsx} (91%)
 rename web/src/components/cards/{npm.tsx => Npm.tsx} (95%)
 rename web/src/components/cards/{nta.tsx => Nta.tsx} (96%)
 rename web/src/components/cards/{pypi.tsx => PyPI.tsx} (93%)
 rename web/src/components/cards/{rubygems.tsx => RubyGems.tsx} (93%)
 rename web/src/components/cards/{s3.tsx => S3.tsx} (93%)
 rename web/src/components/cards/{slack.tsx => Slack.tsx} (92%)
 rename web/src/components/cards/{spectrum.tsx => Spectrum.tsx} (92%)
 rename web/src/components/cards/{twitter.tsx => Twitter.tsx} (94%)
 rename web/src/components/{Cards.tsx => cards/core.tsx} (98%)
 create mode 100644 web/src/components/cards/index.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index bd380da..cafcc05 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,131 +1,40 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState } from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 
-import DomainCard from './components/cards/domains'
-import GithubCard from './components/cards/github-repository'
-import NpmCard from './components/cards/npm'
-import PypiCard from './components/cards/pypi'
-import RubyGemsCard from './components/cards/rubygems'
-import CratesioCard from './components/cards/cratesio'
-import HomebrewCard from './components/cards/homebrew'
-import LinuxCard from './components/cards/linux'
-import TwitterCard from './components/cards/twitter'
-import SpectrumCard from './components/cards/spectrum'
-import SlackCard from './components/cards/slack'
-import S3Card from './components/cards/s3'
-import JsOrgCard from './components/cards/jsorg'
-import GithubSearchCard from './components/cards/github-search'
-import AppStoreCard from './components/cards/appstore'
-import HerokuCard from './components/cards/heroku'
-import NowCard from './components/cards/now'
-import NtaCard from './components/cards/nta'
-
 import Welcome from './components/Welcome'
+import Form from './components/Form'
+import Cards from './components/cards'
 import Footer from './components/Footer'
-import Suggestion from './components/Suggestion'
 
-import { useDeferredState } from './util/hooks'
 import { mobile } from './util/css'
 import { isStandalone } from './util/pwa'
 
 export default function App() {
-  const [query, setQuery] = useDeferredState(1000, '')
-  const [inputValue, setInputValue] = useState('')
-  const [suggested, setSuggested] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const {
-    t,
-    i18n: { language },
-  } = useTranslation()
+  const [query, setQuery] = useState('')
+  const { t } = useTranslation()
 
-  const queryGiven = query && query.length > 0
-
-  useEffect(() => {
-    const modifiedValue = inputValue.replace(/[\s@+!#$%^&*()[\]]/g, '')
-    setQuery(modifiedValue)
-  }, [inputValue, setQuery])
-
-  useEffect(() => {
-    if (query.length === 0) {
-      setSuggested(false)
-    }
-  }, [query])
-
-  // set input value
-  function onInputChange(e: React.FormEvent<HTMLInputElement>) {
-    const value = e.currentTarget.value
-    setInputValue(value)
-  }
-
-  // clear input form and focus on it
-  function onLogoClick(e: React.MouseEvent<HTMLDivElement>) {
-    setInputValue('')
-    inputRef.current!.focus()
-  }
-
-  // invoke when user clicked one of the suggested items
-  function onSuggestionCompleted(name: string) {
-    setInputValue(name)
-    setSuggested(true)
+  function onQuery(query: string) {
+    setQuery(query)
   }
 
   return (
     <>
       <GlobalStyle />
-
       <Helmet>
         <title>namae — {t('title')}</title>
       </Helmet>
-
       <Header>
-        <InputContainer>
-          <Logo onClick={onLogoClick}>namæ</Logo>
-          <InputView
-            onChange={onInputChange}
-            value={inputValue}
-            ref={inputRef}
-            placeholder={t('placeholder')}
-            aria-label="search query"
-          />
-          {queryGiven && !suggested ? (
-            <Suggestion onSubmit={onSuggestionCompleted} query={query} />
-          ) : null}
-        </InputContainer>
+        <Form onQuery={onQuery} />
       </Header>
-
       <Content>
-        {queryGiven ? (
-          <SearchResult>
-            <Cards>
-              <DomainCard query={query} />
-              <GithubCard query={query} />
-              <NpmCard query={query} />
-              <PypiCard query={query} />
-              <RubyGemsCard query={query} />
-              <CratesioCard query={query} />
-              <HomebrewCard query={query} />
-              <LinuxCard query={query} />
-              <TwitterCard query={query} />
-              <SpectrumCard query={query} />
-              <SlackCard query={query} />
-              <HerokuCard query={query} />
-              <NowCard query={query} />
-              <JsOrgCard query={query} />
-              <S3Card query={query} />
-            </Cards>
-            <Cards>
-              <GithubSearchCard query={query} />
-              <AppStoreCard query={query} />
-              {language === 'ja' ? <NtaCard query={query} /> : null}
-            </Cards>
-          </SearchResult>
+        {query !== '' ? (
+          <Cards query={query} />
         ) : (
           !isStandalone() && <Welcome />
         )}
       </Content>
-
       <Footer />
     </>
   )
@@ -171,62 +80,3 @@ const Header = styled.header`
     padding: 0 20px;
   }
 `
-
-const InputContainer = styled.div`
-  transform: translateY(40px);
-  padding: 20px;
-  background: #ffffff;
-  box-shadow: 0 10px 20px 0 #c7dcf7;
-  border-radius: 20px;
-
-  ${mobile} {
-    transform: translateY(20px);
-  }
-`
-
-const Logo = styled.div`
-  margin-bottom: 5px;
-  text-align: center;
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 20px;
-  color: #4a90e2;
-  cursor: pointer;
-
-  ${mobile} {
-    font-size: 15px;
-  }
-`
-
-const InputView = styled.input.attrs({
-  type: 'text',
-  autocomplete: 'off',
-  autocorrect: 'off',
-  autocapitalize: 'off',
-  spellcheck: 'false',
-})`
-  width: 100%;
-  border: none;
-  outline: none;
-  text-align: center;
-  font-family: monospace;
-  font-size: 5rem;
-  line-height: 1.2em;
-
-  ${mobile} {
-    font-size: 2rem;
-  }
-`
-
-const SearchResult = styled.div``
-
-const Cards = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  ${mobile} {
-    flex-direction: column;
-  }
-`
diff --git a/web/src/components/Form.tsx b/web/src/components/Form.tsx
new file mode 100644
index 0000000..3cf3144
--- /dev/null
+++ b/web/src/components/Form.tsx
@@ -0,0 +1,112 @@
+import React, { useState, useRef, useEffect } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'react-i18next'
+
+import { useDeferredState } from '../util/hooks'
+import { mobile } from '../util/css'
+
+import Suggestion from './Suggestion'
+
+const Form: React.FC<{ onQuery: (query: string) => void }> = ({ onQuery }) => {
+  const [query, setQuery] = useDeferredState(800, '')
+  const [inputValue, setInputValue] = useState('')
+  const [suggested, setSuggested] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const { t } = useTranslation()
+
+  // set input value
+  function onInputChange(e: React.FormEvent<HTMLInputElement>) {
+    const value = e.currentTarget.value
+    setInputValue(value)
+  }
+
+  // clear input form and focus on it
+  function onLogoClick(e: React.MouseEvent<HTMLDivElement>) {
+    setInputValue('')
+    inputRef.current!.focus()
+  }
+
+  // invoke when user clicked one of the suggested items
+  function onSuggestionCompleted(name: string) {
+    setInputValue(name)
+    setSuggested(true)
+  }
+
+  const queryGiven = query && query.length > 0
+
+  useEffect(() => {
+    if (query.length === 0) {
+      setSuggested(false)
+    }
+    onQuery(query)
+  }, [query, onQuery])
+
+  useEffect(() => {
+    const modifiedValue = inputValue.replace(/[\s@+!#$%^&*()[\]]/g, '')
+    setQuery(modifiedValue)
+  }, [inputValue, setQuery])
+
+  return (
+    <InputContainer>
+      <Logo onClick={onLogoClick}>namæ</Logo>
+      <InputView
+        onChange={onInputChange}
+        value={inputValue}
+        ref={inputRef}
+        placeholder={t('placeholder')}
+        aria-label="search query"
+      />
+      {queryGiven && !suggested ? (
+        <Suggestion onSubmit={onSuggestionCompleted} query={query} />
+      ) : null}
+    </InputContainer>
+  )
+}
+
+export default Form
+
+const InputContainer = styled.div`
+  transform: translateY(40px);
+  padding: 20px;
+  background: #ffffff;
+  box-shadow: 0 10px 20px 0 #c7dcf7;
+  border-radius: 20px;
+
+  ${mobile} {
+    transform: translateY(20px);
+  }
+`
+
+const Logo = styled.div`
+  margin-bottom: 5px;
+  text-align: center;
+  font-family: sans-serif;
+  font-weight: bold;
+  font-size: 20px;
+  color: #4a90e2;
+  cursor: pointer;
+
+  ${mobile} {
+    font-size: 15px;
+  }
+`
+
+const InputView = styled.input.attrs({
+  type: 'text',
+  autocomplete: 'off',
+  autocorrect: 'off',
+  autocapitalize: 'off',
+  spellcheck: 'false',
+})`
+  width: 100%;
+  border: none;
+  outline: none;
+  text-align: center;
+  font-family: monospace;
+  font-size: 5rem;
+  line-height: 1.2em;
+
+  ${mobile} {
+    font-size: 2rem;
+  }
+`
diff --git a/web/src/components/cards/appstore.tsx b/web/src/components/cards/AppStore.tsx
similarity index 96%
rename from web/src/components/cards/appstore.tsx
rename to web/src/components/cards/AppStore.tsx
index 61661ba..dfa4f0a 100644
--- a/web/src/components/cards/appstore.tsx
+++ b/web/src/components/cards/AppStore.tsx
@@ -3,7 +3,7 @@ import useFetch from 'fetch-suspense'
 import { useTranslation } from 'react-i18next'
 import { FaAppStore, FaInfoCircle } from 'react-icons/fa'
 
-import { Card, Result } from '../Cards'
+import { Card, Result } from './core'
 
 const Search: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/cratesio.tsx b/web/src/components/cards/Cratesio.tsx
similarity index 91%
rename from web/src/components/cards/cratesio.tsx
rename to web/src/components/cards/Cratesio.tsx
index 9012c0d..d8dc826 100644
--- a/web/src/components/cards/cratesio.tsx
+++ b/web/src/components/cards/Cratesio.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { DiRust } from 'react-icons/di'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/domains.tsx b/web/src/components/cards/Domains.tsx
similarity index 93%
rename from web/src/components/cards/domains.tsx
rename to web/src/components/cards/Domains.tsx
index 0cd4d87..be21dd1 100644
--- a/web/src/components/cards/domains.tsx
+++ b/web/src/components/cards/Domains.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaMapSigns } from 'react-icons/fa'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const DomainCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/github-repository.tsx b/web/src/components/cards/GitHubRepository.tsx
similarity index 94%
rename from web/src/components/cards/github-repository.tsx
rename to web/src/components/cards/GitHubRepository.tsx
index 3378234..ae2f814 100644
--- a/web/src/components/cards/github-repository.tsx
+++ b/web/src/components/cards/GitHubRepository.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaGithub } from 'react-icons/fa'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const GithubCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/github-search.tsx b/web/src/components/cards/GitHubSearch.tsx
similarity index 97%
rename from web/src/components/cards/github-search.tsx
rename to web/src/components/cards/GitHubSearch.tsx
index d25f29d..4d22f19 100644
--- a/web/src/components/cards/github-search.tsx
+++ b/web/src/components/cards/GitHubSearch.tsx
@@ -3,7 +3,7 @@ import useFetch from 'fetch-suspense'
 import { useTranslation } from 'react-i18next'
 import { FaGithub, FaInfoCircle } from 'react-icons/fa'
 
-import { Card, Result } from '../Cards'
+import { Card, Result } from './core'
 
 const Search: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/heroku.tsx b/web/src/components/cards/Heroku.tsx
similarity index 91%
rename from web/src/components/cards/heroku.tsx
rename to web/src/components/cards/Heroku.tsx
index 47d4357..9801bb5 100644
--- a/web/src/components/cards/heroku.tsx
+++ b/web/src/components/cards/Heroku.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { DiHeroku } from 'react-icons/di'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const HerokuCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/homebrew.tsx b/web/src/components/cards/Homebrew.tsx
similarity index 95%
rename from web/src/components/cards/homebrew.tsx
rename to web/src/components/cards/Homebrew.tsx
index 80935ca..3b4a855 100644
--- a/web/src/components/cards/homebrew.tsx
+++ b/web/src/components/cards/Homebrew.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { IoIosBeer } from 'react-icons/io'
 
-import { Card, Repeater, ExistentialAvailability } from '../Cards'
+import { Card, Repeater, ExistentialAvailability } from './core'
 
 const HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/jsorg.tsx b/web/src/components/cards/JsOrg.tsx
similarity index 92%
rename from web/src/components/cards/jsorg.tsx
rename to web/src/components/cards/JsOrg.tsx
index 1a7bbe4..8aee577 100644
--- a/web/src/components/cards/jsorg.tsx
+++ b/web/src/components/cards/JsOrg.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaJsSquare } from 'react-icons/fa'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/linux.tsx b/web/src/components/cards/Linux.tsx
similarity index 93%
rename from web/src/components/cards/linux.tsx
rename to web/src/components/cards/Linux.tsx
index b04544f..06184b4 100644
--- a/web/src/components/cards/linux.tsx
+++ b/web/src/components/cards/Linux.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { DiUbuntu } from 'react-icons/di'
 import { DiDebian } from 'react-icons/di'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const LinuxCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/now.tsx b/web/src/components/cards/Now.tsx
similarity index 91%
rename from web/src/components/cards/now.tsx
rename to web/src/components/cards/Now.tsx
index 9f2eef5..8176a9e 100644
--- a/web/src/components/cards/now.tsx
+++ b/web/src/components/cards/Now.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { NowIcon } from '../Icons'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const NowCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/npm.tsx b/web/src/components/cards/Npm.tsx
similarity index 95%
rename from web/src/components/cards/npm.tsx
rename to web/src/components/cards/Npm.tsx
index a3bf718..7b8395f 100644
--- a/web/src/components/cards/npm.tsx
+++ b/web/src/components/cards/Npm.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaNpm } from 'react-icons/fa'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const NpmCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/nta.tsx b/web/src/components/cards/Nta.tsx
similarity index 96%
rename from web/src/components/cards/nta.tsx
rename to web/src/components/cards/Nta.tsx
index 35aa791..863e960 100644
--- a/web/src/components/cards/nta.tsx
+++ b/web/src/components/cards/Nta.tsx
@@ -3,7 +3,7 @@ import useFetch from 'fetch-suspense'
 import { useTranslation } from 'react-i18next'
 import { FaBuilding, FaInfoCircle } from 'react-icons/fa'
 
-import { Card, Result } from '../Cards'
+import { Card, Result } from './core'
 
 const Search: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/pypi.tsx b/web/src/components/cards/PyPI.tsx
similarity index 93%
rename from web/src/components/cards/pypi.tsx
rename to web/src/components/cards/PyPI.tsx
index e9705ee..575f631 100644
--- a/web/src/components/cards/pypi.tsx
+++ b/web/src/components/cards/PyPI.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { FaPython } from 'react-icons/fa'
 
 import { capitalize } from '../../util/text'
-import { Card, DedicatedAvailability, Repeater } from '../Cards'
+import { Card, DedicatedAvailability, Repeater } from './core'
 
 const PypiCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/rubygems.tsx b/web/src/components/cards/RubyGems.tsx
similarity index 93%
rename from web/src/components/cards/rubygems.tsx
rename to web/src/components/cards/RubyGems.tsx
index 60b80cb..ac93ed3 100644
--- a/web/src/components/cards/rubygems.tsx
+++ b/web/src/components/cards/RubyGems.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaGem } from 'react-icons/fa'
 
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/s3.tsx b/web/src/components/cards/S3.tsx
similarity index 93%
rename from web/src/components/cards/s3.tsx
rename to web/src/components/cards/S3.tsx
index 4943369..9edc659 100644
--- a/web/src/components/cards/s3.tsx
+++ b/web/src/components/cards/S3.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaAws } from 'react-icons/fa'
 
-import { Card, DedicatedAvailability, Repeater } from '../Cards'
+import { Card, DedicatedAvailability, Repeater } from './core'
 
 const S3Card: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/slack.tsx b/web/src/components/cards/Slack.tsx
similarity index 92%
rename from web/src/components/cards/slack.tsx
rename to web/src/components/cards/Slack.tsx
index 0b22888..9844704 100644
--- a/web/src/components/cards/slack.tsx
+++ b/web/src/components/cards/Slack.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaSlack } from 'react-icons/fa'
 
-import { Card, DedicatedAvailability, Repeater } from '../Cards'
+import { Card, DedicatedAvailability, Repeater } from './core'
 
 const SlackCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/cards/spectrum.tsx b/web/src/components/cards/Spectrum.tsx
similarity index 92%
rename from web/src/components/cards/spectrum.tsx
rename to web/src/components/cards/Spectrum.tsx
index 4a8f8c0..ce91488 100644
--- a/web/src/components/cards/spectrum.tsx
+++ b/web/src/components/cards/Spectrum.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 import { SpectrumIcon } from '../Icons'
 
 const SpectrumCard: React.FC<{ query: string }> = ({ query }) => {
diff --git a/web/src/components/cards/twitter.tsx b/web/src/components/cards/Twitter.tsx
similarity index 94%
rename from web/src/components/cards/twitter.tsx
rename to web/src/components/cards/Twitter.tsx
index 7862c42..d975f94 100644
--- a/web/src/components/cards/twitter.tsx
+++ b/web/src/components/cards/Twitter.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { FaTwitter } from 'react-icons/fa'
 
 import { capitalize } from '../../util/text'
-import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { Card, Repeater, DedicatedAvailability } from './core'
 
 const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation()
diff --git a/web/src/components/Cards.tsx b/web/src/components/cards/core.tsx
similarity index 98%
rename from web/src/components/Cards.tsx
rename to web/src/components/cards/core.tsx
index 6dc0ae3..d612013 100644
--- a/web/src/components/Cards.tsx
+++ b/web/src/components/cards/core.tsx
@@ -7,8 +7,8 @@ import BarLoader from 'react-spinners/BarLoader'
 import { GoInfo } from 'react-icons/go'
 import { useTranslation } from 'react-i18next'
 
-import { ExternalLink } from './Links'
-import { mobile } from '../util/css'
+import { mobile } from '../../util/css'
+import { ExternalLink } from '../Links'
 
 const COLORS = {
   available: '#6e00ff',
diff --git a/web/src/components/cards/index.tsx b/web/src/components/cards/index.tsx
new file mode 100644
index 0000000..cfc0197
--- /dev/null
+++ b/web/src/components/cards/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'react-i18next'
+
+import { mobile } from '../../util/css'
+import DomainCard from './Domains'
+import GithubCard from './GitHubRepository'
+import NpmCard from './Npm'
+import PypiCard from './PyPI'
+import RubyGemsCard from './RubyGems'
+import CratesioCard from './Cratesio'
+import HomebrewCard from './Homebrew'
+import LinuxCard from './Linux'
+import TwitterCard from './Twitter'
+import SpectrumCard from './Spectrum'
+import SlackCard from './Slack'
+import S3Card from './S3'
+import JsOrgCard from './JsOrg'
+import GithubSearchCard from './GitHubSearch'
+import AppStoreCard from './AppStore'
+import HerokuCard from './Heroku'
+import NowCard from './Now'
+import NtaCard from './Nta'
+
+const Index: React.FC<{ query: string }> = ({ query }) => {
+  const {
+    i18n: { language },
+  } = useTranslation()
+
+  return (
+    <>
+      <Cards>
+        <DomainCard query={query} />
+        <GithubCard query={query} />
+        <NpmCard query={query} />
+        <PypiCard query={query} />
+        <RubyGemsCard query={query} />
+        <CratesioCard query={query} />
+        <HomebrewCard query={query} />
+        <LinuxCard query={query} />
+        <TwitterCard query={query} />
+        <SpectrumCard query={query} />
+        <SlackCard query={query} />
+        <HerokuCard query={query} />
+        <NowCard query={query} />
+        <JsOrgCard query={query} />
+        <S3Card query={query} />
+      </Cards>
+      <Cards>
+        <GithubSearchCard query={query} />
+        <AppStoreCard query={query} />
+        {language === 'ja' ? <NtaCard query={query} /> : null}
+      </Cards>
+    </>
+  )
+}
+
+export default Index
+
+const Cards = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  ${mobile} {
+    flex-direction: column;
+  }
+`