ErrorView.tsx 981 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import React from "react";
  2. import styled from "styled-components";
  3. const StyledErrorView = styled.div`
  4. display: flex;
  5. flex-direction: column;
  6. align-items: center;
  7. justify-content: center;
  8. width: 100%;
  9. height: 100%;
  10. img {
  11. filter: drop-shadow(2px 4px 6px black);
  12. }
  13. `;
  14. const StyledTitle = styled.h2`
  15. color: ${({ theme }) => theme.TEXT_DANGER};
  16. `;
  17. const StyledInfo = styled.p`
  18. width: 60%;
  19. text-align: center;
  20. color: ${({ theme }) => theme.TEXT_NORMAL};
  21. `;
  22. export const ErrorView = () => (
  23. <StyledErrorView>
  24. <img
  25. src="assets/undraw_qa_engineers_dg-5-p.svg"
  26. width="200"
  27. height="200"
  28. alt="oops"
  29. />
  30. <StyledTitle>JSON Crack unable to handle this file!</StyledTitle>
  31. <StyledInfo>
  32. We apologize for the problem you encountered, we are doing our best as Open
  33. Source community to improve our service. JSON Crack is currently unable to
  34. handle such a huge file.
  35. </StyledInfo>
  36. </StyledErrorView>
  37. );