feat: add suggestion

web/src/components/Cards.js

@@ -16,11 +16,15 @@ export function Card({ title, nameList = [], alternativeList = [], children }) {
       <CardTitle>{title}</CardTitle>
       <CardList>
         {nameList.map((name) => (
-          <AvailabilityContainer>{children(name)}</AvailabilityContainer>
+          <AvailabilityContainer key={name}>
+            {children(name)}
+          </AvailabilityContainer>
         ))}
         {revealAlternatives &&
           alternativeList.map((name) => (
-            <AvailabilityContainer>{children(name)}</AvailabilityContainer>
+            <AvailabilityContainer key={name}>
+              {children(name)}
+            </AvailabilityContainer>
           ))}
         {alternativeList.length > 0 && !revealAlternatives ? (
           <ShowAlternativesButton onClick={onClick}>

web/src/components/Suggestion.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'react-i18next'
+import { capitalize } from '../util/text'
+
+export default function Suggestion({ query, onSubmit }) {
+  const { t } = useTranslation()
+  const capital = capitalize(query)
+  const lower = query.toLowerCase()
+
+  const suggestions = [
+    `${lower}ify`,
+    `insta${lower}`,
+    `lib${lower}`,
+    `omni${lower}`,
+    `${capital}Lab`,
+    `${capital}Kit`,
+    `Open${capital}`,
+  ]
+    .sort(() => Math.random() - 0.5)
+    .slice(0, 3)
+
+  function applyQuery(name) {
+    onSubmit(name)
+  }
+
+  return (
+    <Container>
+      <Title>{t('try')}</Title>
+      <Items>
+        {suggestions.map((name) => (
+          <Item key={name} onClick={() => applyQuery(name)}>
+            {name}
+          </Item>
+        ))}
+      </Items>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  line-height: 1em;
+`
+
+const Title = styled.div`
+  margin-top: 15px;
+  border: 1px solid black;
+  padding: 1px 6px;
+  border-radius: 20px;
+  font-size: 0.6em;
+`
+
+const Items = styled.div`
+  margin-top: 15px;
+  margin-left: 8px;
+  display: flex;
+  flex-direction: row;
+`
+
+const Item = styled.div`
+  margin-right: 8px;
+  cursor: pointer;
+  font-weight: bold;
+`

web/src/components/cards/CratesioCard.js

@@ -9,7 +9,7 @@ export default function CratesioCard({ name }) {
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title={t('providers.rust')} key={lowerCase} nameList={[lowerCase]}>
+    <Card title={t('providers.rust')} nameList={[lowerCase]}>
       {(name) => (
         <DedicatedAvailability
           name={name}

web/src/components/cards/DomainCard.js

@@ -11,7 +11,6 @@ export default function DomainCard({ name }) {
   return (
     <Card
       title={t('providers.domains')}
-      key={lowerCase}
       nameList={[`${lowerCase}.com`, `${lowerCase}app.com`, `${lowerCase}.app`]}
       alternativeList={[
         `${lowerCase}.dev`,

web/src/components/cards/GithubCard.js

@@ -12,7 +12,6 @@ export default function GithubCard({ name }) {
   return (
     <Card
       title={t('providers.github')}
-      key={name}
       nameList={[name]}
       alternativeList={[
         `${lowerCase}hq`,

web/src/components/cards/HomebrewCard.js

@@ -9,10 +9,7 @@ export default function HomebrewCard({ name }) {
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card
-      title={t('providers.homebrew')}
-      key={lowerCase}
-      nameList={[lowerCase]}>
+    <Card title={t('providers.homebrew')} nameList={[lowerCase]}>
       {(name) => (
         <>
           <ExistentialAvailability

web/src/components/cards/JsOrgCard.js

@@ -9,7 +9,7 @@ export default function JsOrgCard({ name }) {
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title={t('providers.jsorg')} key={lowerCase} nameList={[lowerCase]}>
+    <Card title={t('providers.jsorg')} nameList={[lowerCase]}>
       {(name) => (
         <DedicatedAvailability
           name={`${name}.js.org`}

web/src/components/cards/NpmCard.js

@@ -11,7 +11,6 @@ export default function NpmCard({ name }) {
   return (
     <Card
       title={t('providers.npm')}
-      key={lowerCase}
       nameList={[lowerCase]}
       alternativeList={[`${lowerCase}-js`]}>
       {(name) => (

web/src/components/cards/PypiCard.js

@@ -11,7 +11,6 @@ export default function PypiCard({ name }) {
   return (
     <Card
       title={t('providers.pypi')}
-      key={name}
       nameList={[name]}
       alternativeList={[`Py${capitalize(name)}`]}>
       {(name) => (

web/src/components/cards/RubyGemsCard.js

@@ -10,7 +10,6 @@ export default function RubyGemsCard({ name }) {
   return (
     <Card
       title={t('providers.rubygems')}
-      key={name}
       nameList={[name]}
       alternativeList={[`${name.toLowerCase()}-rb`]}>
       {(name) => (

web/src/components/cards/S3Card.js

@@ -9,7 +9,7 @@ export default function S3Card({ name }) {
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title={t('providers.s3')} key={lowerCase} nameList={[lowerCase]}>
+    <Card title={t('providers.s3')} nameList={[lowerCase]}>
       {(name) => (
         <DedicatedAvailability
           name={name}

web/src/components/cards/SlackCard.js

@@ -9,7 +9,7 @@ export default function SlackCard({ name }) {
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title={t('providers.slack')} key={lowerCase} nameList={[lowerCase]}>
+    <Card title={t('providers.slack')} nameList={[lowerCase]}>
       {(name) => (
         <DedicatedAvailability
           name={name}

web/src/components/cards/TwitterCard.js

@@ -11,7 +11,6 @@ export default function TwitterCard({ name }) {
   return (
     <Card
       title={t('providers.twitter')}
-      key={name}
       nameList={[name]}
       alternativeList={[
         `${capitalize(name)}HQ`,