uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-16 20:20:38 +09:00
Code Issues Releases Activity

chore: reorder components

Browse Source
This commit is contained in:
uetchy 2019-07-31 12:22:31 +09:00
parent 3c1b3d82ee
commit 44c46f329d
14 changed files with 92 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -6,11 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ffffff" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="title" content="namae.dev" />
<meta name="title" content="namae" />
<meta name="description" content="name your new project" />
<meta name="keywords" content="name" />
<meta name="robots" content="index, follow" />
<title>namae.dev</title>
<title>namae</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

95
src/App.js
View File

@ -1,20 +1,20 @@
import React from 'react'
import styled from 'styled-components'
import { FaTwitter, FaGlobe } from 'react-icons/fa'
import { useDeferredState } from './hooks/state'
import { mobile } from './util/css'
import { CardHolder } from './components/Card'
import GithubCard from './components/GithubCard'
import DomainCard from './components/DomainCard'
import HomebrewCard from './components/HomebrewCard'
import TwitterCard from './components/TwitterCard'
import SlackCard from './components/SlackCard'
import NpmCard from './components/NpmCard'
import JsOrgCard from './components/JsOrgCard'
import PypiCard from './components/PypiCard'
import S3Card from './components/S3Card'
import CratesioCard from './components/CratesioCard'
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'
import Footer from './components/Footer'
export default function App() {
const [query, setQuery] = useDeferredState(1000)
@ -26,22 +26,15 @@ export default function App() {
return (
<>
<Header>
<Logo>namae.dev</Logo>
<Logo>namæ</Logo>
<SubHeader>name your new project</SubHeader>
<Input
onChange={onChange}
type="text"
placeholder="awesome-package"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
/>
<Input onChange={onChange} />
</Header>
{query && query.length > 0 ? (
<Result>
<ResultHeader>Result for {query}</ResultHeader>
<CardHolder>
<Cards>
<CardHeader>Result for {query}</CardHeader>
<CardContainer>
<GithubCard name={query} />
<DomainCard name={query} />
<TwitterCard name={query} />
@ -52,28 +45,11 @@ export default function App() {
<JsOrgCard name={query} />
<SlackCard name={query} />
<S3Card name={query} />
</CardHolder>
</Result>
</CardContainer>
</Cards>
) : null}
<Footer>
<p>
Made by U with{' '}
<span role="img" aria-label="love">
🐤
</span>
<br />
<br />
<a
href="https://twitter.com/uetschy"
target="_blank"
rel="noopener noreferrer">
<FaTwitter />
</a>{' '}
<a href="https://uechi.io" target="_blank" rel="noopener noreferrer">
<FaGlobe />
</a>
</p>
</Footer>
<Footer />
</>
)
}
@ -94,7 +70,14 @@ const SubHeader = styled.div`
font-style: italic;
`
const Input = styled.input`
const Input = styled.input.attrs({
type: 'text',
placeholder: 'awesome-package',
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off',
spellcheck: 'false',
})`
width: 100%;
margin-top: 20px;
padding: 20px;
@ -115,11 +98,11 @@ const Input = styled.input`
}
`
const Result = styled.div`
const Cards = styled.div`
margin-top: 40px;
`
const ResultHeader = styled.div`
const CardHeader = styled.div`
margin-bottom: 20px;
font-size: 1.2rem;
font-weight: bold;
@ -130,11 +113,13 @@ const ResultHeader = styled.div`
text-align: left;
}
`
const CardContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
const Footer = styled.footer`
margin: 40px 0;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 0.8em;
${mobile} {
flex-direction: column;
}
`

13
src/components/Card.js
View File

@ -20,17 +20,6 @@ export const CardTitle = styled.div`
margin-bottom: 15px;
`
export const CardHolder = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
${mobile} {
flex-direction: column;
}
`
export function AvailabilityCell({
name,
availability,
@ -83,7 +72,7 @@ export function DedicatedAvailability({
)
}
export function ExistenceAvailability({
export function ExistentialAvailability({
name,
target,
prefix = '',

35
src/components/Footer.js Normal file
View File

@ -0,0 +1,35 @@
import React from 'react'
import styled from 'styled-components'
import { FaTwitter, FaGlobe } from 'react-icons/fa'
export default function Footer() {
return (
<Container>
<p>
Made by U with{' '}
<span role="img" aria-label="love">
🐤
</span>
<br />
<br />
<a
href="https://twitter.com/uetschy"
target="_blank"
rel="noopener noreferrer">
<FaTwitter />
</a>{' '}
<a href="https://uechi.io" target="_blank" rel="noopener noreferrer">
<FaGlobe />
</a>
</p>
</Container>
)
}
const Container = styled.footer`
margin: 40px 0;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 0.8em;
`

2
src/components/CratesioCard.js → src/components/cards/CratesioCard.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { DiRust } from 'react-icons/di'
import { Card, CardTitle, DedicatedAvailability } from './Card'
import { Card, CardTitle, DedicatedAvailability } from '../Card'
export default function CratesioCard({ name }) {
const lowerCase = name.toLowerCase()

2
src/components/DomainCard.js → src/components/cards/DomainCard.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from './Card'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
import { FaMapSigns } from 'react-icons/fa'
export default function DomainCard({ name }) {

4
src/components/GithubCard.js → src/components/cards/GithubCard.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import { FaGithub } from 'react-icons/fa'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from './Card'
import { capitalize } from '../util/text'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
import { capitalize } from '../../util/text'
export default function GithubCard({ name }) {
return (

6
src/components/HomebrewCard.js → src/components/cards/HomebrewCard.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Card, CardTitle, ExistenceAvailability } from './Card'
import { Card, CardTitle, ExistentialAvailability } from '../Card'
import { IoIosBeer } from 'react-icons/io'
export default function HomebrewCard({ name }) {
@ -8,13 +8,13 @@ export default function HomebrewCard({ name }) {
return (
<Card key={lowerCase}>
<CardTitle>Homebrew</CardTitle>
<ExistenceAvailability
<ExistentialAvailability
name={lowerCase}
target={`https://formulae.brew.sh/api/formula/${lowerCase}.json`}
url={`https://formulae.brew.sh/formula/${lowerCase}`}
icon={<IoIosBeer />}
/>
<ExistenceAvailability
<ExistentialAvailability
name={lowerCase}
target={`https://formulae.brew.sh/api/cask/${lowerCase}.json`}
url={`https://formulae.brew.sh/cask/${lowerCase}`}

2
src/components/JsOrgCard.js → src/components/cards/JsOrgCard.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { FaJsSquare } from 'react-icons/fa'
import { Card, CardTitle, DedicatedAvailability } from './Card'
import { Card, CardTitle, DedicatedAvailability } from '../Card'
export default function JsOrgCard({ name }) {
const lowerCase = name.toLowerCase()

2
src/components/NpmCard.js → src/components/cards/NpmCard.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { FaNpm } from 'react-icons/fa'
import { Card, CardTitle, DedicatedAvailability } from './Card'
import { Card, CardTitle, DedicatedAvailability } from '../Card'
export default function NpmCard({ name }) {
const lowerCase = name.toLowerCase()

2
src/components/PypiCard.js → src/components/cards/PypiCard.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Card, CardTitle, DedicatedAvailability } from './Card'
import { Card, CardTitle, DedicatedAvailability } from '../Card'
import { FaPython } from 'react-icons/fa'
export default function PypiCard({ name }) {

2
src/components/S3Card.js → src/components/cards/S3Card.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Card, CardTitle, DedicatedAvailability } from './Card'
import { Card, CardTitle, DedicatedAvailability } from '../Card'
import { FaAws } from 'react-icons/fa'
export default function S3Card({ name }) {

2
src/components/SlackCard.js → src/components/cards/SlackCard.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Card, CardTitle, DedicatedAvailability } from './Card'
import { Card, CardTitle, DedicatedAvailability } from '../Card'
import { FaSlack } from 'react-icons/fa'
export default function SlackCard({ name }) {

4
src/components/TwitterCard.js → src/components/cards/TwitterCard.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import { FaTwitter } from 'react-icons/fa'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from './Card'
import { capitalize } from '../util/text'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
import { capitalize } from '../../util/text'
export default function TwitterCard({ name }) {
return (