1
0
mirror of https://github.com/uetchy/namae.git synced 2025-07-02 06:20:02 +09:00
namae/web/src/App.js

141 lines
3.1 KiB
JavaScript
Raw Normal View History

2019-07-27 19:18:54 +09:00
import React from 'react'
2019-07-31 04:01:40 +09:00
import styled from 'styled-components'
2019-07-31 03:43:13 +09:00
2019-07-30 23:27:28 +09:00
import { useDeferredState } from './hooks/state'
2019-07-31 04:42:54 +09:00
import { mobile } from './util/css'
2019-07-31 12:22:31 +09:00
2019-07-31 13:57:48 +09:00
import Footer from './components/Footer'
2019-07-31 12:22:31 +09:00
import GithubCard from './components/cards/GithubCard'
import DomainCard from './components/cards/DomainCard'
import HomebrewCard from './components/cards/HomebrewCard'
import TwitterCard from './components/cards/TwitterCard'
import SlackCard from './components/cards/SlackCard'
import NpmCard from './components/cards/NpmCard'
import JsOrgCard from './components/cards/JsOrgCard'
import PypiCard from './components/cards/PypiCard'
import S3Card from './components/cards/S3Card'
import CratesioCard from './components/cards/CratesioCard'
2019-08-01 01:10:09 +09:00
import { EventReporter } from './components/Analytics'
2019-07-27 19:18:54 +09:00
2019-07-30 23:27:28 +09:00
export default function App() {
const [query, setQuery] = useDeferredState(1000)
2019-07-27 19:18:54 +09:00
function onChange(e) {
setQuery(e.target.value)
}
return (
2019-08-01 01:48:55 +09:00
<Content>
2019-07-31 03:43:13 +09:00
<Header>
2019-08-01 01:48:55 +09:00
<InputContainer>
<Logo>namæ</Logo>
<Input onChange={onChange} />
</InputContainer>
2019-07-31 03:43:13 +09:00
</Header>
2019-07-31 12:22:31 +09:00
2019-07-30 23:27:28 +09:00
{query && query.length > 0 ? (
2019-07-31 12:22:31 +09:00
<Cards>
<CardHeader>Result for {query}</CardHeader>
<CardContainer>
2019-07-31 02:08:41 +09:00
<DomainCard name={query} />
2019-07-31 14:05:39 +09:00
<GithubCard name={query} />
2019-07-31 04:25:24 +09:00
<HomebrewCard name={query} />
2019-07-30 23:27:28 +09:00
<NpmCard name={query} />
2019-07-31 01:43:12 +09:00
<PypiCard name={query} />
2019-07-31 03:17:56 +09:00
<CratesioCard name={query} />
2019-07-31 14:05:39 +09:00
<TwitterCard name={query} />
2019-07-31 04:25:24 +09:00
<SlackCard name={query} />
2019-07-31 02:22:05 +09:00
<S3Card name={query} />
2019-07-31 14:05:39 +09:00
<JsOrgCard name={query} />
2019-07-31 12:22:31 +09:00
</CardContainer>
2019-08-01 01:10:09 +09:00
<EventReporter query={query} />
2019-07-31 12:22:31 +09:00
</Cards>
2019-07-30 23:27:28 +09:00
) : null}
2019-07-31 12:22:31 +09:00
<Footer />
2019-08-01 01:48:55 +09:00
</Content>
2019-07-27 19:18:54 +09:00
)
}
2019-08-01 01:48:55 +09:00
const Content = styled.div``
2019-07-31 03:43:13 +09:00
const Header = styled.header`
2019-08-01 01:48:55 +09:00
margin-bottom: 100px;
padding: 0 40px;
background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%);
${mobile} {
margin-bottom: 60px;
padding: 0 20px;
}
`
const InputContainer = styled.div`
transform: translateY(40px);
padding: 20px;
background: #ffffff;
box-shadow: 0 10px 20px 0 #3c94fa;
border-radius: 4px;
${mobile} {
transform: translateY(20px);
}
2019-07-31 00:26:49 +09:00
`
2019-07-31 03:43:13 +09:00
const Logo = styled.div`
2019-07-31 10:36:54 +09:00
margin-bottom: 5px;
2019-08-01 01:48:55 +09:00
text-align: center;
2019-07-31 03:43:13 +09:00
font-family: sans-serif;
font-weight: bold;
2019-08-01 01:48:55 +09:00
font-size: 20px;
color: #4a90e2;
2019-07-31 03:43:13 +09:00
`
2019-07-31 12:22:31 +09:00
const Input = styled.input.attrs({
type: 'text',
2019-08-01 01:48:55 +09:00
placeholder: ['awesome-library', 'stunning-package', 'magnificent-app'][
Math.floor(Math.random() * 3)
],
2019-07-31 12:22:31 +09:00
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off',
spellcheck: 'false',
})`
2019-07-30 23:27:28 +09:00
width: 100%;
outline: none;
2019-07-31 03:52:17 +09:00
text-align: center;
2019-08-01 01:48:55 +09:00
font-size: 5rem;
2019-07-30 23:27:28 +09:00
font-family: monospace;
2019-07-31 00:26:49 +09:00
border: none;
2019-07-31 03:52:17 +09:00
2019-07-31 04:42:54 +09:00
${mobile} {
2019-07-30 23:27:28 +09:00
font-size: 2rem;
}
`
2019-07-31 12:22:31 +09:00
const Cards = styled.div`
2019-07-30 23:27:28 +09:00
margin-top: 40px;
`
2019-07-31 12:22:31 +09:00
const CardHeader = styled.div`
2019-07-30 23:27:28 +09:00
margin-bottom: 20px;
2019-07-31 00:18:58 +09:00
font-size: 1.2rem;
font-weight: bold;
2019-07-31 04:42:54 +09:00
text-align: center;
${mobile} {
2019-07-31 04:43:59 +09:00
padding-left: 20px;
2019-07-31 04:42:54 +09:00
text-align: left;
}
2019-07-30 23:27:28 +09:00
`
2019-07-31 12:22:31 +09:00
const CardContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
2019-07-31 03:43:13 +09:00
2019-07-31 12:22:31 +09:00
${mobile} {
flex-direction: column;
}
2019-07-31 03:43:13 +09:00
`