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