uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 12:30:32 +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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <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="description" content="name your new project" />
<meta name="keywords" content="name" /> <meta name="keywords" content="name" />
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<title>namae.dev</title> <title>namae</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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 React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { FaTwitter, FaGlobe } from 'react-icons/fa'
import { useDeferredState } from './hooks/state' import { useDeferredState } from './hooks/state'
import { mobile } from './util/css' import { mobile } from './util/css'
import { CardHolder } from './components/Card'
import GithubCard from './components/GithubCard' import GithubCard from './components/cards/GithubCard'
import DomainCard from './components/DomainCard' import DomainCard from './components/cards/DomainCard'
import HomebrewCard from './components/HomebrewCard' import HomebrewCard from './components/cards/HomebrewCard'
import TwitterCard from './components/TwitterCard' import TwitterCard from './components/cards/TwitterCard'
import SlackCard from './components/SlackCard' import SlackCard from './components/cards/SlackCard'
import NpmCard from './components/NpmCard' import NpmCard from './components/cards/NpmCard'
import JsOrgCard from './components/JsOrgCard' import JsOrgCard from './components/cards/JsOrgCard'
import PypiCard from './components/PypiCard' import PypiCard from './components/cards/PypiCard'
import S3Card from './components/S3Card' import S3Card from './components/cards/S3Card'
import CratesioCard from './components/CratesioCard' import CratesioCard from './components/cards/CratesioCard'
import Footer from './components/Footer'
export default function App() { export default function App() {
const [query, setQuery] = useDeferredState(1000) const [query, setQuery] = useDeferredState(1000)
@ -26,22 +26,15 @@ export default function App() {
return ( return (
<> <>
<Header> <Header>
<Logo>namae.dev</Logo> <Logo>namæ</Logo>
<SubHeader>name your new project</SubHeader> <SubHeader>name your new project</SubHeader>
<Input <Input onChange={onChange} />
onChange={onChange}
type="text"
placeholder="awesome-package"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
/>
</Header> </Header>
{query && query.length > 0 ? ( {query && query.length > 0 ? (
<Result> <Cards>
<ResultHeader>Result for {query}</ResultHeader> <CardHeader>Result for {query}</CardHeader>
<CardHolder> <CardContainer>
<GithubCard name={query} /> <GithubCard name={query} />
<DomainCard name={query} /> <DomainCard name={query} />
<TwitterCard name={query} /> <TwitterCard name={query} />
@ -52,28 +45,11 @@ export default function App() {
<JsOrgCard name={query} /> <JsOrgCard name={query} />
<SlackCard name={query} /> <SlackCard name={query} />
<S3Card name={query} /> <S3Card name={query} />
</CardHolder> </CardContainer>
</Result> </Cards>
) : null} ) : null}
<Footer>
<p> <Footer />
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>
</> </>
) )
} }
@ -94,7 +70,14 @@ const SubHeader = styled.div`
font-style: italic; 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%; width: 100%;
margin-top: 20px; margin-top: 20px;
padding: 20px; padding: 20px;
@ -115,11 +98,11 @@ const Input = styled.input`
} }
` `
const Result = styled.div` const Cards = styled.div`
margin-top: 40px; margin-top: 40px;
` `
const ResultHeader = styled.div` const CardHeader = styled.div`
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
@ -130,11 +113,13 @@ const ResultHeader = styled.div`
text-align: left; text-align: left;
} }
` `
const CardContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
const Footer = styled.footer` ${mobile} {
margin: 40px 0; flex-direction: column;
text-align: center; }
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 0.8em;
` `

13
src/components/Card.js
View File

@ -20,17 +20,6 @@ export const CardTitle = styled.div`
margin-bottom: 15px; 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({ export function AvailabilityCell({
name, name,
availability, availability,
@ -83,7 +72,7 @@ export function DedicatedAvailability({
) )
} }
export function ExistenceAvailability({ export function ExistentialAvailability({
name, name,
target, target,
prefix = '', 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 React from 'react'
import { DiRust } from 'react-icons/di' import { DiRust } from 'react-icons/di'
import { Card, CardTitle, DedicatedAvailability } from './Card' import { Card, CardTitle, DedicatedAvailability } from '../Card'
export default function CratesioCard({ name }) { export default function CratesioCard({ name }) {
const lowerCase = name.toLowerCase() 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 React from 'react'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from './Card' import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
import { FaMapSigns } from 'react-icons/fa' import { FaMapSigns } from 'react-icons/fa'
export default function DomainCard({ name }) { 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 React from 'react'
import { FaGithub } from 'react-icons/fa' import { FaGithub } from 'react-icons/fa'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from './Card' import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
import { capitalize } from '../util/text' import { capitalize } from '../../util/text'
export default function GithubCard({ name }) { export default function GithubCard({ name }) {
return ( return (

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

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { Card, CardTitle, ExistenceAvailability } from './Card' import { Card, CardTitle, ExistentialAvailability } from '../Card'
import { IoIosBeer } from 'react-icons/io' import { IoIosBeer } from 'react-icons/io'
export default function HomebrewCard({ name }) { export default function HomebrewCard({ name }) {
@ -8,13 +8,13 @@ export default function HomebrewCard({ name }) {
return ( return (
<Card key={lowerCase}> <Card key={lowerCase}>
<CardTitle>Homebrew</CardTitle> <CardTitle>Homebrew</CardTitle>
<ExistenceAvailability <ExistentialAvailability
name={lowerCase} name={lowerCase}
target={`https://formulae.brew.sh/api/formula/${lowerCase}.json`} target={`https://formulae.brew.sh/api/formula/${lowerCase}.json`}
url={`https://formulae.brew.sh/formula/${lowerCase}`} url={`https://formulae.brew.sh/formula/${lowerCase}`}
icon={<IoIosBeer />} icon={<IoIosBeer />}
/> />
<ExistenceAvailability <ExistentialAvailability
name={lowerCase} name={lowerCase}
target={`https://formulae.brew.sh/api/cask/${lowerCase}.json`} target={`https://formulae.brew.sh/api/cask/${lowerCase}.json`}
url={`https://formulae.brew.sh/cask/${lowerCase}`} 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 React from 'react'
import { FaJsSquare } from 'react-icons/fa' import { FaJsSquare } from 'react-icons/fa'
import { Card, CardTitle, DedicatedAvailability } from './Card' import { Card, CardTitle, DedicatedAvailability } from '../Card'
export default function JsOrgCard({ name }) { export default function JsOrgCard({ name }) {
const lowerCase = name.toLowerCase() 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 React from 'react'
import { FaNpm } from 'react-icons/fa' import { FaNpm } from 'react-icons/fa'
import { Card, CardTitle, DedicatedAvailability } from './Card' import { Card, CardTitle, DedicatedAvailability } from '../Card'
export default function NpmCard({ name }) { export default function NpmCard({ name }) {
const lowerCase = name.toLowerCase() 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 React from 'react'
import { Card, CardTitle, DedicatedAvailability } from './Card' import { Card, CardTitle, DedicatedAvailability } from '../Card'
import { FaPython } from 'react-icons/fa' import { FaPython } from 'react-icons/fa'
export default function PypiCard({ name }) { 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 React from 'react'
import { Card, CardTitle, DedicatedAvailability } from './Card' import { Card, CardTitle, DedicatedAvailability } from '../Card'
import { FaAws } from 'react-icons/fa' import { FaAws } from 'react-icons/fa'
export default function S3Card({ name }) { 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 React from 'react'
import { Card, CardTitle, DedicatedAvailability } from './Card' import { Card, CardTitle, DedicatedAvailability } from '../Card'
import { FaSlack } from 'react-icons/fa' import { FaSlack } from 'react-icons/fa'
export default function SlackCard({ name }) { 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 React from 'react'
import { FaTwitter } from 'react-icons/fa' import { FaTwitter } from 'react-icons/fa'
import { Card, CardTitle, DedicatedAvailability, Alternatives } from './Card' import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
import { capitalize } from '../util/text' import { capitalize } from '../../util/text'
export default function TwitterCard({ name }) { export default function TwitterCard({ name }) {
return ( return (