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
|
|
|
`
|