mirror of
https://github.com/uetchy/namae.git
synced 2025-03-17 12:30:32 +09:00
chore: cosmetic changes
This commit is contained in:
parent
dbf8a99e06
commit
5d17a86779
@ -28,10 +28,10 @@ import { mobile } from './util/css'
|
|||||||
import { isStandalone } from './util/pwa'
|
import { isStandalone } from './util/pwa'
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [query, setQuery] = useDeferredState('', 1000)
|
const [query, setQuery] = useDeferredState(1000, '')
|
||||||
const [inputValue, setInputValue] = useState('')
|
const [inputValue, setInputValue] = useState('')
|
||||||
const inputRef = useRef()
|
|
||||||
const [suggested, setSuggested] = useState(false)
|
const [suggested, setSuggested] = useState(false)
|
||||||
|
const inputRef = useRef()
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const queryGiven = query && query.length > 0
|
const queryGiven = query && query.length > 0
|
||||||
@ -92,20 +92,20 @@ export default function App() {
|
|||||||
{queryGiven ? (
|
{queryGiven ? (
|
||||||
<SearchResult>
|
<SearchResult>
|
||||||
<Cards>
|
<Cards>
|
||||||
<DomainCard name={query} />
|
<DomainCard query={query} />
|
||||||
<GithubCard name={query} />
|
<GithubCard query={query} />
|
||||||
<NpmCard name={query} />
|
<NpmCard query={query} />
|
||||||
<PypiCard name={query} />
|
<PypiCard query={query} />
|
||||||
<RubyGemsCard name={query} />
|
<RubyGemsCard query={query} />
|
||||||
<CratesioCard name={query} />
|
<CratesioCard query={query} />
|
||||||
<HomebrewCard name={query} />
|
<HomebrewCard query={query} />
|
||||||
<LinuxCard name={query} />
|
<LinuxCard query={query} />
|
||||||
|
<TwitterCard query={query} />
|
||||||
|
<SlackCard query={query} />
|
||||||
|
<S3Card query={query} />
|
||||||
|
<JsOrgCard query={query} />
|
||||||
<GithubSearchCard query={query} />
|
<GithubSearchCard query={query} />
|
||||||
<AppStoreCard query={query} />
|
<AppStoreCard query={query} />
|
||||||
<TwitterCard name={query} />
|
|
||||||
<SlackCard name={query} />
|
|
||||||
<S3Card name={query} />
|
|
||||||
<JsOrgCard name={query} />
|
|
||||||
</Cards>
|
</Cards>
|
||||||
<EventReporter query={query} />
|
<EventReporter query={query} />
|
||||||
</SearchResult>
|
</SearchResult>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
|
||||||
|
|
||||||
import { ExternalLink } from './Links'
|
import { ExternalLink } from './Links'
|
||||||
|
|
||||||
|
@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
|
|||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import fetch from 'isomorphic-unfetch'
|
import fetch from 'isomorphic-unfetch'
|
||||||
|
|
||||||
import { capitalize } from '../util/text'
|
import { capitalize } from '../util/text'
|
||||||
|
|
||||||
const modifiers = [
|
const modifiers = [
|
||||||
|
@ -11,7 +11,7 @@ function Search({ query }) {
|
|||||||
const apps = response.result
|
const apps = response.result
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
{apps.map((app) => (
|
{apps.map((app) => (
|
||||||
<Result
|
<Result
|
||||||
title={app.name}
|
title={app.name}
|
||||||
@ -21,7 +21,7 @@ function Search({ query }) {
|
|||||||
key={app.id}
|
key={app.id}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,9 +4,9 @@ import { DiRust } from 'react-icons/di'
|
|||||||
|
|
||||||
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function CratesioCard({ name }) {
|
export default function CratesioCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [lowerCase]
|
const names = [lowerCase]
|
||||||
|
|
||||||
|
@ -4,16 +4,17 @@ import { FaMapSigns } from 'react-icons/fa'
|
|||||||
|
|
||||||
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function DomainCard({ name }) {
|
export default function DomainCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [`${lowerCase}.com`, `${lowerCase}app.com`, `${lowerCase}.app`]
|
const names = [`${lowerCase}.com`, `${lowerCase}.app`]
|
||||||
const moreNames = [
|
const moreNames = [
|
||||||
|
`${lowerCase}app.com`,
|
||||||
|
`get${lowerCase}.com`,
|
||||||
`${lowerCase}.dev`,
|
`${lowerCase}.dev`,
|
||||||
`${lowerCase}.io`,
|
`${lowerCase}.io`,
|
||||||
`${lowerCase}.tools`,
|
`${lowerCase}.tools`,
|
||||||
`get${lowerCase}.com`,
|
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -4,11 +4,11 @@ import { FaGithub } from 'react-icons/fa'
|
|||||||
|
|
||||||
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function GithubCard({ name }) {
|
export default function GithubCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [name]
|
const names = [query]
|
||||||
const moreNames = [
|
const moreNames = [
|
||||||
`${lowerCase}hq`,
|
`${lowerCase}hq`,
|
||||||
`${lowerCase}-team`,
|
`${lowerCase}-team`,
|
||||||
|
@ -13,7 +13,7 @@ function Search({ query }) {
|
|||||||
const repos = response.items
|
const repos = response.items
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
{repos.map((repo) => (
|
{repos.map((repo) => (
|
||||||
<Result
|
<Result
|
||||||
title={repo.full_name}
|
title={repo.full_name}
|
||||||
@ -23,7 +23,7 @@ function Search({ query }) {
|
|||||||
key={repo.id}
|
key={repo.id}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,9 +4,9 @@ import { IoIosBeer } from 'react-icons/io'
|
|||||||
|
|
||||||
import { Card, Repeater, ExistentialAvailability } from '../Cards'
|
import { Card, Repeater, ExistentialAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function HomebrewCard({ name }) {
|
export default function HomebrewCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [lowerCase]
|
const names = [lowerCase]
|
||||||
|
|
||||||
|
@ -4,9 +4,9 @@ import { FaJsSquare } from 'react-icons/fa'
|
|||||||
|
|
||||||
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function JsOrgCard({ name }) {
|
export default function JsOrgCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [lowerCase]
|
const names = [lowerCase]
|
||||||
|
|
||||||
|
@ -5,9 +5,9 @@ import { DiDebian } from 'react-icons/di'
|
|||||||
|
|
||||||
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function LinuxCard({ name }) {
|
export default function LinuxCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [lowerCase]
|
const names = [lowerCase]
|
||||||
|
|
||||||
|
@ -4,9 +4,9 @@ import { FaNpm } from 'react-icons/fa'
|
|||||||
|
|
||||||
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function NpmCard({ name }) {
|
export default function NpmCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [lowerCase]
|
const names = [lowerCase]
|
||||||
const moreNames = [`${lowerCase}-js`]
|
const moreNames = [`${lowerCase}-js`]
|
||||||
|
@ -5,11 +5,11 @@ import { FaPython } from 'react-icons/fa'
|
|||||||
import { capitalize } from '../../util/text'
|
import { capitalize } from '../../util/text'
|
||||||
import { Card, DedicatedAvailability, Repeater } from '../Cards'
|
import { Card, DedicatedAvailability, Repeater } from '../Cards'
|
||||||
|
|
||||||
export default function PypiCard({ name }) {
|
export default function PypiCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const names = [name]
|
const names = [query]
|
||||||
const moreNames = [`Py${capitalize(name)}`]
|
const moreNames = [`Py${capitalize(query)}`]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card title={t('providers.pypi')}>
|
<Card title={t('providers.pypi')}>
|
||||||
|
@ -4,11 +4,11 @@ import { FaGem } from 'react-icons/fa'
|
|||||||
|
|
||||||
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function RubyGemsCard({ name }) {
|
export default function RubyGemsCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const names = [name]
|
const names = [query]
|
||||||
const moreNames = [`${name.toLowerCase()}-rb`]
|
const moreNames = [`${query.toLowerCase()}-rb`]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card title={t('providers.rubygems')}>
|
<Card title={t('providers.rubygems')}>
|
||||||
|
@ -4,9 +4,9 @@ import { FaAws } from 'react-icons/fa'
|
|||||||
|
|
||||||
import { Card, DedicatedAvailability, Repeater } from '../Cards'
|
import { Card, DedicatedAvailability, Repeater } from '../Cards'
|
||||||
|
|
||||||
export default function S3Card({ name }) {
|
export default function S3Card({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [lowerCase]
|
const names = [lowerCase]
|
||||||
|
|
||||||
|
@ -4,9 +4,9 @@ import { FaSlack } from 'react-icons/fa'
|
|||||||
|
|
||||||
import { Card, DedicatedAvailability, Repeater } from '../Cards'
|
import { Card, DedicatedAvailability, Repeater } from '../Cards'
|
||||||
|
|
||||||
export default function SlackCard({ name }) {
|
export default function SlackCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const lowerCase = name.toLowerCase()
|
const lowerCase = query.toLowerCase()
|
||||||
|
|
||||||
const names = [lowerCase]
|
const names = [lowerCase]
|
||||||
|
|
||||||
|
@ -5,17 +5,19 @@ import { FaTwitter } from 'react-icons/fa'
|
|||||||
import { capitalize } from '../../util/text'
|
import { capitalize } from '../../util/text'
|
||||||
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
import { Card, Repeater, DedicatedAvailability } from '../Cards'
|
||||||
|
|
||||||
export default function TwitterCard({ name }) {
|
export default function TwitterCard({ query }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
const lowerCase = query.toLowerCase()
|
||||||
|
const capitalCase = capitalize(query)
|
||||||
|
|
||||||
const names = [name]
|
const names = [query]
|
||||||
const moreNames = [
|
const moreNames = [
|
||||||
`${name.toLowerCase()}app`,
|
`${lowerCase}app`,
|
||||||
`hey${name.toLowerCase()}`,
|
`hey${lowerCase}`,
|
||||||
`${capitalize(name)}Team`,
|
`${capitalCase}Team`,
|
||||||
`${capitalize(name)}HQ`,
|
`${capitalCase}HQ`,
|
||||||
`${name.toLowerCase()}_official`,
|
`${lowerCase}_official`,
|
||||||
`${name.toLowerCase()}-support`,
|
`${lowerCase}-support`,
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
|
|
||||||
export function useDeferredState(initialValue = undefined, duration = 1000) {
|
export function useDeferredState(duration = 1000, initialValue = undefined) {
|
||||||
const [response, setResponse] = useState(initialValue)
|
const [response, setResponse] = useState(initialValue)
|
||||||
const [innerValue, setInnerValue] = useState(initialValue)
|
const [innerValue, setInnerValue] = useState(initialValue)
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user