mirror of
https://github.com/uetchy/namae.git
synced 2025-03-17 20:40:32 +09:00
feat: welcome page
This commit is contained in:
parent
4b96affd29
commit
8584881f7e
@ -4,7 +4,9 @@ import styled, { createGlobalStyle } from 'styled-components'
|
|||||||
import { useDeferredState } from './hooks/state'
|
import { useDeferredState } from './hooks/state'
|
||||||
import { mobile } from './util/css'
|
import { mobile } from './util/css'
|
||||||
|
|
||||||
|
import Welcome from './components/Welcome'
|
||||||
import Footer from './components/Footer'
|
import Footer from './components/Footer'
|
||||||
|
import { Cards, CardContainer } from './components/Cards'
|
||||||
|
|
||||||
import GithubCard from './components/cards/GithubCard'
|
import GithubCard from './components/cards/GithubCard'
|
||||||
import DomainCard from './components/cards/DomainCard'
|
import DomainCard from './components/cards/DomainCard'
|
||||||
@ -38,9 +40,8 @@ export default function App() {
|
|||||||
</InputContainer>
|
</InputContainer>
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
{queryGiven && (
|
{queryGiven ? (
|
||||||
<Cards>
|
<Cards>
|
||||||
<CardHeader>Result for {query}</CardHeader>
|
|
||||||
<CardContainer>
|
<CardContainer>
|
||||||
<DomainCard name={query} />
|
<DomainCard name={query} />
|
||||||
<GithubCard name={query} />
|
<GithubCard name={query} />
|
||||||
@ -55,6 +56,8 @@ export default function App() {
|
|||||||
</CardContainer>
|
</CardContainer>
|
||||||
<EventReporter query={query} />
|
<EventReporter query={query} />
|
||||||
</Cards>
|
</Cards>
|
||||||
|
) : (
|
||||||
|
<Welcome />
|
||||||
)}
|
)}
|
||||||
<Footer />
|
<Footer />
|
||||||
</Content>
|
</Content>
|
||||||
@ -63,12 +66,28 @@ export default function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const GlobalStyle = createGlobalStyle`
|
const GlobalStyle = createGlobalStyle`
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
||||||
${mobile} {
|
${mobile} {
|
||||||
background: #f5f5f5;
|
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);
|
transform: translateY(40px);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 0 10px 20px 0 #3c94fa;
|
box-shadow: 0 10px 20px 0 #c7dcf7;
|
||||||
border-radius: 4px;
|
border-radius: 20px;
|
||||||
|
|
||||||
${mobile} {
|
${mobile} {
|
||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
@ -112,48 +131,20 @@ const Logo = styled.div`
|
|||||||
|
|
||||||
const Input = styled.input.attrs({
|
const Input = styled.input.attrs({
|
||||||
type: 'text',
|
type: 'text',
|
||||||
placeholder: ['awesome-library', 'stunning-package', 'magnificent-app'][
|
placeholder: 'search',
|
||||||
Math.floor(Math.random() * 3)
|
|
||||||
],
|
|
||||||
autocomplete: 'off',
|
autocomplete: 'off',
|
||||||
autocorrect: 'off',
|
autocorrect: 'off',
|
||||||
autocapitalize: 'off',
|
autocapitalize: 'off',
|
||||||
spellcheck: 'false',
|
spellcheck: 'false',
|
||||||
})`
|
})`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 5rem;
|
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
border: none;
|
font-size: 5rem;
|
||||||
|
|
||||||
${mobile} {
|
${mobile} {
|
||||||
font-size: 2rem;
|
font-size: 1.5rem;
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
@ -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`
|
const CardWrapper = styled.div`
|
||||||
margin-bottom: 40px;
|
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
|
|
||||||
${mobile} {
|
${mobile} {
|
||||||
|
margin-bottom: 40px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
@ -12,15 +12,15 @@ export default function Footer() {
|
|||||||
<span role="img" aria-label="coffee">
|
<span role="img" aria-label="coffee">
|
||||||
☕️
|
☕️
|
||||||
</span>
|
</span>
|
||||||
<br />
|
</p>
|
||||||
<br />
|
<Links>
|
||||||
<ExternalLink href="https://twitter.com/uetschy">
|
<ExternalLink href="https://twitter.com/uetschy">
|
||||||
<FaTwitter />
|
<FaTwitter />
|
||||||
</ExternalLink>{' '}
|
</ExternalLink>{' '}
|
||||||
<ExternalLink href="https://github.com/uetchy/namae">
|
<ExternalLink href="https://github.com/uetchy/namae">
|
||||||
<FaGithubAlt />
|
<FaGithubAlt />
|
||||||
</ExternalLink>
|
</ExternalLink>
|
||||||
</p>
|
</Links>
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -31,4 +31,18 @@ const Container = styled.footer`
|
|||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||||
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
font-size: 0.8em;
|
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;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
109
web/src/components/Welcome.js
Normal file
109
web/src/components/Welcome.js
Normal 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;
|
||||||
|
}
|
||||||
|
`
|
@ -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;
|
|
||||||
}
|
|
@ -1,13 +1,12 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom'
|
||||||
import ReactGA from 'react-ga'
|
import ReactGA from 'react-ga'
|
||||||
import './index.css'
|
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import * as serviceWorker from './serviceWorker'
|
// import * as serviceWorker from './serviceWorker'
|
||||||
|
|
||||||
ReactDOM.render(<App />, document.getElementById('root'))
|
ReactDOM.render(<App />, document.getElementById('root'))
|
||||||
|
|
||||||
ReactGA.initialize('UA-28919359-15')
|
ReactGA.initialize('UA-28919359-15')
|
||||||
ReactGA.pageview(window.location.pathname + window.location.search)
|
ReactGA.pageview(window.location.pathname + window.location.search)
|
||||||
|
|
||||||
serviceWorker.unregister()
|
// serviceWorker.unregister()
|
||||||
|
12
yarn.lock
12
yarn.lock
@ -7401,6 +7401,11 @@ pnp-webpack-plugin@1.2.1:
|
|||||||
dependencies:
|
dependencies:
|
||||||
ts-pnp "^1.0.0"
|
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:
|
portfinder@^1.0.9:
|
||||||
version "1.0.21"
|
version "1.0.21"
|
||||||
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.21.tgz#60e1397b95ac170749db70034ece306b9a27e324"
|
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"
|
prop-types "^15.5.10"
|
||||||
recompose "0.27.1 - 0.30.0"
|
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:
|
react@^16.8.6:
|
||||||
version "16.8.6"
|
version "16.8.6"
|
||||||
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
|
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user