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:
parent
4b96affd29
commit
8584881f7e
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
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 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()
|
||||
|
||||
12
yarn.lock
12
yarn.lock
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user