diff --git a/web/src/components/Card.js b/web/src/components/Card.js
index dd40b11..749090b 100644
--- a/web/src/components/Card.js
+++ b/web/src/components/Card.js
@@ -4,68 +4,6 @@ import styled from 'styled-components'
import { Fallback } from './Availability'
import { mobile } from '../util/css'
-export function Card({ title, nameList, alternativeList = [], children }) {
- const [show, setShow] = useState(false)
-
- function onClick() {
- setShow(true)
- }
-
- return (
-
- {title}
- <>
- {nameList.map((name) => (
-
- }>{children(name)}
-
- ))}
- {show
- ? alternativeList.map((name) => (
-
- }>{children(name)}
-
- ))
- : null}
- >
- {alternativeList.length > 0 && !show ? (
-
- show alternatives
-
- ) : null}
-
- )
-}
-
-export const CardTitle = styled.div`
- font-size: 0.8rem;
- font-weight: bold;
- margin-bottom: 15px;
-`
-
-const CardWrapper = styled.div`
- margin-bottom: 20px;
- padding: 40px;
- border-radius: 2px;
-
- ${mobile} {
- padding: 20px;
- box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
- border-radius: 0;
- }
-`
-
-const ShowAlternativesButton = styled.div`
- display: inline-block;
- margin-top: 10px;
- padding: 5px 0;
- border: none;
- border-bottom: 1px dashed black;
- cursor: pointer;
- font-family: monospace;
- font-size: 1rem;
-`
-
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
@@ -82,3 +20,66 @@ class ErrorBoundary extends React.Component {
return this.props.children
}
}
+
+const BoundedSuspense = ({ children }) => (
+
+ }>{children}
+
+)
+
+export function Card({ title, nameList, alternativeList = [], children }) {
+ const [revealAlternatives, setRevealAlternatives] = useState(false)
+
+ function onClick() {
+ setRevealAlternatives(true)
+ }
+
+ return (
+
+ {title}
+ <>
+ {nameList.map((name) => (
+ {children(name)}
+ ))}
+ {revealAlternatives &&
+ alternativeList.map((name) => (
+ {children(name)}
+ ))}
+ >
+ {alternativeList.length > 0 && !revealAlternatives ? (
+
+ show alternatives
+
+ ) : null}
+
+ )
+}
+
+const CardWrapper = styled.div`
+ margin-bottom: 20px;
+ padding: 40px;
+ border-radius: 2px;
+
+ ${mobile} {
+ padding: 20px;
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+ border-radius: 0;
+ }
+`
+
+const CardTitle = styled.div`
+ font-size: 0.8rem;
+ font-weight: bold;
+ margin-bottom: 15px;
+`
+
+const ShowAlternativesButton = styled.div`
+ display: inline-block;
+ margin-top: 10px;
+ padding: 5px 0;
+ border: none;
+ border-bottom: 1px dashed black;
+ cursor: pointer;
+ font-family: monospace;
+ font-size: 1rem;
+`