chore: reorder components

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 = '',

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 (
+    <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;
+`

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()

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 }) {

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 (

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

src/components/cards/JsOrgCard.js

@@ -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()

src/components/cards/NpmCard.js

@@ -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()

src/components/cards/PypiCard.js

@@ -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 }) {

src/components/cards/S3Card.js

@@ -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 }) {

src/components/cards/SlackCard.js

@@ -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 }) {

src/components/cards/TwitterCard.js

@@ -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 (