diff --git a/src/App.js b/src/App.js index e0474ad..803059b 100644 --- a/src/App.js +++ b/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 ( <> -
- namae.dev — name your new project +
+ namae.dev + name your new project -
+
{query && query.length > 0 ? ( Result for {query} @@ -60,17 +63,46 @@ export default function App() { ) : null} + ) } -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; +`