import React from 'react'; import PageContentBlock from '@/components/elements/PageContentBlock'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faArrowLeft, faSyncAlt } from '@fortawesome/free-solid-svg-icons'; import styled, { keyframes } from 'styled-components/macro'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; interface BaseProps { title: string; image: string; message: string; onRetry?: () => void; onBack?: () => void; } interface PropsWithRetry extends BaseProps { onRetry?: () => void; onBack?: never | undefined; } interface PropsWithBack extends BaseProps { onBack?: () => void; onRetry?: never | undefined; } type Props = PropsWithBack | PropsWithRetry; const spin = keyframes` to { transform: rotate(360deg) } `; const ActionButton = styled(Button)` ${tw`rounded-full w-8 h-8 flex items-center justify-center`}; &.hover\\:spin:hover { animation: ${spin} 2s linear infinite; } `; export default ({ title, image, message, onBack, onRetry }: Props) => (
{(typeof onBack === 'function' || typeof onRetry === 'function') &&
onRetry ? onRetry() : (onBack ? onBack() : null)} className={onRetry ? 'hover:spin' : undefined} >
}

{title}

{message}

);