diff --git a/public/index.html b/public/index.html
index d54045c..54e26a1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,11 +6,11 @@
-
+
- namae.dev
+ namae
diff --git a/src/App.js b/src/App.js
index 21a7dfd..183db4a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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 (
<>
+
{query && query.length > 0 ? (
-
- Result for {query}
-
+
+ Result for {query}
+
@@ -52,28 +45,11 @@ export default function App() {
-
-
+
+
) : null}
-
+
+
)
}
@@ -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;
+ }
`
diff --git a/src/components/Card.js b/src/components/Card.js
index 12dbed5..b49c1b1 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -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 = '',
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..a1c440e
--- /dev/null
+++ b/src/components/Footer.js
@@ -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 (
+
+
+ Made by U with{' '}
+
+ 🐤
+
+
+
+
+
+ {' '}
+
+
+
+
+
+ )
+}
+
+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;
+`
diff --git a/src/components/CratesioCard.js b/src/components/cards/CratesioCard.js
similarity index 86%
rename from src/components/CratesioCard.js
rename to src/components/cards/CratesioCard.js
index 9e438c6..71d314a 100644
--- a/src/components/CratesioCard.js
+++ b/src/components/cards/CratesioCard.js
@@ -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()
diff --git a/src/components/DomainCard.js b/src/components/cards/DomainCard.js
similarity index 98%
rename from src/components/DomainCard.js
rename to src/components/cards/DomainCard.js
index 9a08b41..3bf3623 100644
--- a/src/components/DomainCard.js
+++ b/src/components/cards/DomainCard.js
@@ -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 }) {
diff --git a/src/components/GithubCard.js b/src/components/cards/GithubCard.js
similarity index 93%
rename from src/components/GithubCard.js
rename to src/components/cards/GithubCard.js
index 176c947..29956f1 100644
--- a/src/components/GithubCard.js
+++ b/src/components/cards/GithubCard.js
@@ -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 (
diff --git a/src/components/HomebrewCard.js b/src/components/cards/HomebrewCard.js
similarity index 83%
rename from src/components/HomebrewCard.js
rename to src/components/cards/HomebrewCard.js
index 8a1dc46..52bfc5a 100644
--- a/src/components/HomebrewCard.js
+++ b/src/components/cards/HomebrewCard.js
@@ -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 (
Homebrew
- }
/>
-