1
0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +09:00

feat: welcome page

This commit is contained in:
uetchy 2019-08-01 13:21:23 +09:00
parent 4b96affd29
commit 8584881f7e
7 changed files with 184 additions and 63 deletions

View File

@ -4,7 +4,9 @@ import styled, { createGlobalStyle } from 'styled-components'
import { useDeferredState } from './hooks/state'
import { mobile } from './util/css'
import Welcome from './components/Welcome'
import Footer from './components/Footer'
import { Cards, CardContainer } from './components/Cards'
import GithubCard from './components/cards/GithubCard'
import DomainCard from './components/cards/DomainCard'
@ -38,9 +40,8 @@ export default function App() {
</InputContainer>
</Header>
{queryGiven && (
{queryGiven ? (
<Cards>
<CardHeader>Result for {query}</CardHeader>
<CardContainer>
<DomainCard name={query} />
<GithubCard name={query} />
@ -55,6 +56,8 @@ export default function App() {
</CardContainer>
<EventReporter query={query} />
</Cards>
) : (
<Welcome />
)}
<Footer />
</Content>
@ -63,12 +66,28 @@ export default function App() {
}
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
body {
background: #ffffff;
${mobile} {
background: #f5f5f5;
}
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
`
@ -89,8 +108,8 @@ const InputContainer = styled.div`
transform: translateY(40px);
padding: 20px;
background: #ffffff;
box-shadow: 0 10px 20px 0 #3c94fa;
border-radius: 4px;
box-shadow: 0 10px 20px 0 #c7dcf7;
border-radius: 20px;
${mobile} {
transform: translateY(20px);
@ -112,48 +131,20 @@ const Logo = styled.div`
const Input = styled.input.attrs({
type: 'text',
placeholder: ['awesome-library', 'stunning-package', 'magnificent-app'][
Math.floor(Math.random() * 3)
],
placeholder: 'search',
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off',
spellcheck: 'false',
})`
width: 100%;
border: none;
outline: none;
text-align: center;
font-size: 5rem;
font-family: monospace;
border: none;
font-size: 5rem;
${mobile} {
font-size: 2rem;
}
`
const Cards = styled.div`
margin-top: 40px;
`
const CardHeader = styled.div`
margin-bottom: 20px;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
${mobile} {
padding-left: 20px;
text-align: left;
}
`
const CardContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
${mobile} {
flex-direction: column;
font-size: 1.5rem;
}
`

View File

@ -32,11 +32,26 @@ export function Card({ title, nameList, alternativeList = [], children }) {
)
}
export const Cards = styled.div`
margin-top: 40px;
`
export const CardContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
${mobile} {
flex-direction: column;
}
`
const CardWrapper = styled.div`
margin-bottom: 40px;
padding: 40px;
${mobile} {
margin-bottom: 40px;
padding: 0px;
}
`

View File

@ -8,19 +8,19 @@ export default function Footer() {
return (
<Container>
<p>
Made by U with{' '}
Made by U with{' '}
<span role="img" aria-label="coffee">
</span>
<br />
<br />
</p>
<Links>
<ExternalLink href="https://twitter.com/uetschy">
<FaTwitter />
</ExternalLink>{' '}
<ExternalLink href="https://github.com/uetchy/namae">
<FaGithubAlt />
</ExternalLink>
</p>
</Links>
</Container>
)
}
@ -31,4 +31,18 @@ const Container = styled.footer`
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 0.8em;
display: flex;
align-items: stretch;
justify-content: center;
`
const Links = styled.div`
margin-left: 15px;
display: flex;
align-items: flex-end;
a {
margin-right: 5px;
color: black;
}
`

View File

@ -0,0 +1,109 @@
import React from 'react'
import styled from 'styled-components'
import { FaMapSigns } from 'react-icons/fa'
import { FaGithub } from 'react-icons/fa'
import { FaNpm } from 'react-icons/fa'
import { FaPython } from 'react-icons/fa'
import { IoIosBeer } from 'react-icons/io'
import { DiRust } from 'react-icons/di'
import { FaJsSquare } from 'react-icons/fa'
import { FaAws } from 'react-icons/fa'
import { FaTwitter } from 'react-icons/fa'
import { FaSlack } from 'react-icons/fa'
import { mobile } from '../util/css'
export default function Welcome() {
return (
<Container>
<Header>name your brand new project</Header>
<p>
namæ helps you by searching around package registries and domains to see
if your desired name is already taken.
</p>
<ul>
<List>
<ListItem>
<FaMapSigns /> Domains
</ListItem>
<ListItem>
<FaGithub /> GitHub Organization
</ListItem>
<ListItem>
<FaNpm /> npm
</ListItem>
<ListItem>
<FaPython /> PyPI
</ListItem>
<ListItem>
<IoIosBeer /> Homebrew
</ListItem>
<ListItem>
<DiRust /> crates.io (Rust)
</ListItem>
<ListItem>
<FaJsSquare /> js.org
</ListItem>
<ListItem>
<FaAws /> AWS S3 Bucket
</ListItem>
<ListItem>
<FaTwitter /> Twitter
</ListItem>
<ListItem>
<FaSlack /> Slack
</ListItem>
</List>
</ul>
</Container>
)
}
const Container = styled.div`
text-align: center;
padding: 0 40px;
font-size: 1.5rem;
line-height: 1.6em;
${mobile} {
text-align: left;
}
`
const Header = styled.h1`
font-size: 2em;
padding: 10px 0 40px;
`
const List = styled.div`
margin-top: 40px;
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-image: linear-gradient(180deg, #ec7951 0%, #f03054 100%);
color: white;
border-radius: 4px;
font-size: 1rem;
${mobile} {
flex-direction: column;
}
`
const ListItem = styled.div`
margin: 15px;
display: flex;
align-items: center;
line-height: 1rem;
${mobile} {
margin: 10px 0;
}
svg {
margin-right: 5px;
}
`

View File

@ -1,19 +0,0 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

View File

@ -1,13 +1,12 @@
import React from 'react'
import ReactDOM from 'react-dom'
import ReactGA from 'react-ga'
import './index.css'
import App from './App'
import * as serviceWorker from './serviceWorker'
// import * as serviceWorker from './serviceWorker'
ReactDOM.render(<App />, document.getElementById('root'))
ReactGA.initialize('UA-28919359-15')
ReactGA.pageview(window.location.pathname + window.location.search)
serviceWorker.unregister()
// serviceWorker.unregister()

View File

@ -7401,6 +7401,11 @@ pnp-webpack-plugin@1.2.1:
dependencies:
ts-pnp "^1.0.0"
popper.js@^1.11.1:
version "1.15.0"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
portfinder@^1.0.9:
version "1.0.21"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.21.tgz#60e1397b95ac170749db70034ece306b9a27e324"
@ -8451,6 +8456,13 @@ react-spinners@^0.5.13:
prop-types "^15.5.10"
recompose "0.27.1 - 0.30.0"
react-tippy@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.2.3.tgz#8aef183ec4986ca7c5c556465013d95196fecfd8"
integrity sha512-cEmhw29DbVP33n9ayo0nLzibuSz6o0A77cZtzno7zGsfOH8tUEGai/8a7TXRIKHPYDooW8iJkJBIPDnxmEu00g==
dependencies:
popper.js "^1.11.1"
react@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"