diff --git a/web/src/components/Availability.js b/web/src/components/Availability.js
index d60b3aa..55ccd03 100644
--- a/web/src/components/Availability.js
+++ b/web/src/components/Availability.js
@@ -1,40 +1,62 @@
-import React from 'react'
+import React, { Suspense } from 'react'
import styled from 'styled-components'
import useFetch from 'fetch-suspense'
import { BarLoader } from 'react-spinners'
import { ExternalLink } from './Links'
-function AvailabilityCell({
+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
{this.state.message}
+ }
+ return this.props.children
+ }
+}
+
+const Result = ({
name,
availability,
link,
prefix = '',
suffix = '',
icon,
-}) {
- return (
-
+}) => (
+
+
{icon}
- -
+
{prefix}
- {availability ? (
- {name}
- ) : (
- {name}
- )}
+ {name}
{suffix}
-
- |
- )
-}
+
+
+
+)
-export const Fallback = () => (
-
+const Fallback = () => (
+
-
+
+)
+
+export const AvailabilityContainer = ({ children }) => (
+
+ }>{children}
+
)
export function DedicatedAvailability({
@@ -46,11 +68,13 @@ export function DedicatedAvailability({
icon,
}) {
const response = useFetch(`/availability/${service}/${name}`)
+
if (response.error) {
throw new Error(`${service}: ${response.error}`)
}
+
return (
- (availability ? 'green' : 'red')};
`
-const Item = styled.span`
+const Name = styled.span`
margin-left: 6px;
+ margin-top: -1px;
font-family: monospace;
font-size: 1rem;
diff --git a/web/src/components/Cards.js b/web/src/components/Cards.js
index 749090b..2e1c2a8 100644
--- a/web/src/components/Cards.js
+++ b/web/src/components/Cards.js
@@ -1,32 +1,9 @@
-import React, { Suspense, useState } from 'react'
+import React, { useState } from 'react'
import styled from 'styled-components'
-import { Fallback } from './Availability'
+import { AvailabilityContainer } from './Availability'
import { mobile } from '../util/css'
-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 {this.state.message}
- }
- return this.props.children
- }
-}
-
-const BoundedSuspense = ({ children }) => (
-
- }>{children}
-
-)
-
export function Card({ title, nameList, alternativeList = [], children }) {
const [revealAlternatives, setRevealAlternatives] = useState(false)
@@ -37,33 +14,30 @@ export function Card({ title, nameList, alternativeList = [], children }) {
return (
{title}
- <>
+
{nameList.map((name) => (
- {children(name)}
+ {children(name)}
))}
{revealAlternatives &&
alternativeList.map((name) => (
- {children(name)}
+ {children(name)}
))}
- >
- {alternativeList.length > 0 && !revealAlternatives ? (
-
- show alternatives
-
- ) : null}
+ {alternativeList.length > 0 && !revealAlternatives ? (
+
+ show more
+
+ ) : null}
+
)
}
const CardWrapper = styled.div`
- margin-bottom: 20px;
+ margin-bottom: 40px;
padding: 40px;
- border-radius: 2px;
${mobile} {
- padding: 20px;
- box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
- border-radius: 0;
+ padding: 0px;
}
`
@@ -71,6 +45,20 @@ const CardTitle = styled.div`
font-size: 0.8rem;
font-weight: bold;
margin-bottom: 15px;
+
+ ${mobile} {
+ padding-left: 20px;
+ }
+`
+
+const CardList = styled.div`
+ border-radius: 2px;
+
+ ${mobile} {
+ padding: 20px;
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+ border-radius: 0;
+ }
`
const ShowAlternativesButton = styled.div`
diff --git a/web/src/components/cards/DomainCard.js b/web/src/components/cards/DomainCard.js
index 72f337c..d8d1819 100644
--- a/web/src/components/cards/DomainCard.js
+++ b/web/src/components/cards/DomainCard.js
@@ -10,11 +10,12 @@ export default function DomainCard({ name }) {
{(name) => (
}
/>
}
/>
>