feat: add MVP

src/components/Card.js

@@ -0,0 +1,83 @@
+import React, { Suspense } from 'react'
+import styled from 'styled-components'
+import { BarLoader } from 'react-spinners'
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, message: error.message }
+  }
+
+  componentDidCatch(error, info) {}
+
+  render() {
+    if (this.state.hasError) {
+      return <h4>{this.state.message}</h4>
+    }
+
+    return this.props.children
+  }
+}
+
+export function Card({ children }) {
+  return (
+    <CardWrapper>
+      <ErrorBoundary>
+        <Suspense fallback={<BarLoader />}>{children}</Suspense>
+      </ErrorBoundary>
+    </CardWrapper>
+  )
+}
+
+export const CardHolder = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const CardWrapper = styled.div`
+  margin-bottom: 40px;
+  padding: 20px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+`
+
+const ItemContainer = styled.span`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-top: 8px;
+  word-break: break-all;
+`
+
+const Item = styled.span`
+  margin-left: 6px;
+  font-family: monospace;
+  font-size: 1rem;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+`
+
+export function AvailabilityCell({ name, availability, url, prefix, icon }) {
+  return (
+    <ItemContainer>
+      {icon}
+      <Item>
+        <a href={url + name} target="_blank" rel="noopener noreferrer">
+          {prefix}
+          {availability ? (
+            <span style={{ color: 'green' }}>{name}</span>
+          ) : (
+            <span style={{ color: 'red' }}>{name}</span>
+          )}
+        </a>
+      </Item>
+    </ItemContainer>
+  )
+}

src/components/GithubCard.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { Card, AvailabilityCell } from './Card'
+import { FaGithub } from 'react-icons/fa'
+
+function GithubPanel({ name }) {
+  const response = useFetch(`/availability/github/${name}`)
+
+  if (response.error) {
+    throw new Error(`GitHub: ${response.error}`)
+  }
+
+  return (
+    <AvailabilityCell
+      name={name}
+      availability={response.availability}
+      icon={<FaGithub />}
+      url="https://github.com/"
+      prefix="github.com/"
+    />
+  )
+}
+
+export default function GithubCard({ name }) {
+  return (
+    <Card key={name}>
+      <GithubPanel name={name} />
+    </Card>
+  )
+}

src/components/NpmCard.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { Card, AvailabilityCell } from './Card'
+import { FaNpm } from 'react-icons/fa'
+
+function NpmPanel({ name }) {
+  const response = useFetch(`/availability/npm/${name}`)
+
+  if (response.error) {
+    throw new Error(`npm: ${response.error}`)
+  }
+
+  return (
+    <>
+      <AvailabilityCell
+        name={name}
+        availability={response.packageAvailability}
+        icon={<FaNpm />}
+        url="https://www.npmjs.com/package/"
+        prefix="npmjs.com/package/"
+      />
+      <AvailabilityCell
+        name={name}
+        availability={response.orgAvailability}
+        icon={<FaNpm />}
+        url="https://www.npmjs.com/org/"
+        prefix="npmjs.com/org/"
+      />
+    </>
+  )
+}
+
+export default function NpmCard({ name }) {
+  return (
+    <Card key={name.toLowerCase()}>
+      <NpmPanel name={name.toLowerCase()} />
+    </Card>
+  )
+}

src/components/TwitterCard.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { Card, AvailabilityCell } from './Card'
+import { FaTwitter } from 'react-icons/fa'
+
+function TwitterPanel({ name }) {
+  const response = useFetch(`/availability/twitter/${name}`)
+
+  if (response.error) {
+    throw new Error(`Twitter: ${response.error}`)
+  }
+
+  return (
+    <AvailabilityCell
+      name={name}
+      availability={response.availability}
+      icon={<FaTwitter />}
+      url="https://twitter.com/"
+      prefix="twitter.com/"
+    />
+  )
+}
+
+export default function TwitterCard({ name }) {
+  return (
+    <Card key={name}>
+      <TwitterPanel name={name} />
+    </Card>
+  )
+}