forked from LaconicNetwork/icns-frontend
143 lines
3.0 KiB
TypeScript
143 lines
3.0 KiB
TypeScript
import color from "../../styles/color";
|
|
import { FunctionComponent } from "react";
|
|
import ReactModal from "react-modal";
|
|
import { ErrorMessage } from "../../types";
|
|
import styled from "styled-components";
|
|
|
|
interface Props {
|
|
isModalOpen: boolean;
|
|
onCloseModal: () => void;
|
|
errorMessage?: ErrorMessage;
|
|
isWarning?: boolean;
|
|
}
|
|
|
|
import ErrorIcon from "../../public/images/svg/error-icon.svg";
|
|
import WarningIcon from "../../public/images/svg/warning-icon.svg";
|
|
import ArrowLeftIcon from "../../public/images/svg/arrow-left.svg";
|
|
import { useRouter } from "next/router";
|
|
|
|
export const ErrorModal: FunctionComponent<Props> = (props) => {
|
|
const router = useRouter();
|
|
const { isModalOpen, onCloseModal, errorMessage, isWarning } = props;
|
|
|
|
const onClose = async () => {
|
|
if (errorMessage?.path) {
|
|
await router.push(errorMessage.path);
|
|
}
|
|
|
|
onCloseModal();
|
|
};
|
|
|
|
return (
|
|
<ReactModal
|
|
isOpen={isModalOpen}
|
|
onRequestClose={onClose}
|
|
ariaHideApp={false}
|
|
style={{
|
|
overlay: { background: "#121212cc" },
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
padding: 0,
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
background: color.grey["800"],
|
|
border: 0,
|
|
},
|
|
}}
|
|
>
|
|
<ModalContainer>
|
|
<ErrorTitleContainer>
|
|
<ErrorImageContainer>
|
|
{isWarning ? <WarningIcon /> : <ErrorIcon />}
|
|
</ErrorImageContainer>
|
|
Error
|
|
</ErrorTitleContainer>
|
|
|
|
<ErrorDescription>{errorMessage?.message}</ErrorDescription>
|
|
|
|
{errorMessage?.path ? (
|
|
<ErrorBackButton onClick={onClose}>
|
|
<ErrorBackIconContainer>
|
|
<ArrowLeftIcon />
|
|
</ErrorBackIconContainer>
|
|
GO BACK TO HOME
|
|
</ErrorBackButton>
|
|
) : null}
|
|
</ModalContainer>
|
|
</ReactModal>
|
|
);
|
|
};
|
|
|
|
const ModalContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
width: 32rem;
|
|
|
|
padding: 2.5rem 2.25rem;
|
|
`;
|
|
|
|
const ErrorTitleContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
|
|
align-items: center;
|
|
|
|
font-family: "Inter", serif;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 2rem;
|
|
line-height: 2.5rem;
|
|
|
|
color: ${color.white};
|
|
`;
|
|
|
|
const ErrorImageContainer = styled.div`
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
|
|
position: relative;
|
|
`;
|
|
|
|
const ErrorDescription = styled.div`
|
|
margin-top: 1rem;
|
|
|
|
font-family: "Inter", serif;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1rem;
|
|
line-height: 1.25rem;
|
|
|
|
color: ${color.grey["300"]};
|
|
`;
|
|
|
|
const ErrorBackButton = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
|
|
margin-top: 2.5rem;
|
|
|
|
font-family: "Inter", serif;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 1.125rem;
|
|
line-height: 1.125rem;
|
|
|
|
color: ${color.grey["100"]};
|
|
|
|
cursor: pointer;
|
|
`;
|
|
|
|
const ErrorBackIconContainer = styled.div`
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
|
|
position: relative;
|
|
`;
|