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'; import NotFoundSvg from '@/assets/images/not_found.svg'; import ServerErrorSvg from '@/assets/images/server_error.svg'; interface BaseProps { title: string; image: string; message: string; onRetry?: () => void; onBack?: () => void; } interface PropsWithRetry extends BaseProps { onRetry?: () => void; onBack?: never; } interface PropsWithBack extends BaseProps { onBack?: () => void; onRetry?: never; } export type ScreenBlockProps = 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 p-0`}; &.hover\\:spin:hover { animation: ${spin} 2s linear infinite; } `; const ScreenBlock = ({ title, image, message, onBack, onRetry }: ScreenBlockProps) => (
{(typeof onBack === 'function' || typeof onRetry === 'function') && (
(onRetry ? onRetry() : onBack ? onBack() : null)} className={onRetry ? 'hover:spin' : undefined} >
)}

{title}

{message}

); type ServerErrorProps = (Omit | Omit) & { title?: string; }; const ServerError = ({ title, ...props }: ServerErrorProps) => ( ); const NotFound = ({ title, message, onBack }: Partial>) => ( ); export { ServerError, NotFound }; export default ScreenBlock;