feat: add author

src/App.js

@@ -1,5 +1,7 @@
 import React from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
+import { FaTwitter, FaGlobe } from 'react-icons/fa'
+
 import { useDeferredState } from './hooks/state'
 import { CardHolder } from './components/Card'
 import GithubCard from './components/GithubCard'
@@ -32,17 +34,18 @@ export default function App() {
   return (
     <>
       <GlobalStyle />
-      <header>
-        <Logo>namae.dev — name your new project</Logo>
+      <Header>
+        <Logo>namae.dev</Logo>
+        <SubHeader>name your new project</SubHeader>
         <Input
           onChange={onChange}
+          type="text"
           placeholder="awesome-package"
           autoComplete="off"
           autoCorrect="off"
           autoCapitalize="off"
-          spellCheck="false"
         />
-      </header>
+      </Header>
       {query && query.length > 0 ? (
         <Result>
           <ResultHeader>Result for {query}</ResultHeader>
@@ -60,17 +63,46 @@ export default function App() {
           </CardHolder>
         </Result>
       ) : null}
+      <Footer>
+        <p>
+          Made with{' '}
+          <span role="img" aria-label="love">
+            🐤
+          </span>{' '}
+          by U{' '}
+          <a
+            href="https://twitter.com/uetschy"
+            target="_blank"
+            rel="noopener noreferrer">
+            <FaTwitter />
+          </a>{' '}
+          <a href="https://uechi.io" target="_blank" rel="noopener noreferrer">
+            <FaGlobe />
+          </a>
+        </p>
+      </Footer>
     </>
   )
 }
 
-const Logo = styled.div`
-  margin: 15px;
+const Header = styled.header`
   text-align: center;
 `
 
+const Logo = styled.div`
+  margin: 15px 0 5px;
+  font-family: sans-serif;
+  font-weight: bold;
+`
+
+const SubHeader = styled.div`
+  font-size: 0.8em;
+  font-style: italic;
+`
+
 const Input = styled.input`
   width: 100%;
+  margin-top: 20px;
   padding: 20px;
   outline: none;
   font-size: 4rem;
@@ -93,3 +125,11 @@ const ResultHeader = styled.div`
   font-size: 1.2rem;
   font-weight: bold;
 `
+
+const Footer = styled.footer`
+  margin-top: 40px;
+  text-align: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 0.8em;
+`