From a4cff2a3bb5a5c8885fb2c9fde6ee8e992907a93 Mon Sep 17 00:00:00 2001
From: Uzhastin-Nikita <fosfor20@mail.ru>
Date: Sun, 5 Jun 2022 20:18:25 +0300
Subject: [PATCH] feat: relocate ErrorCode component from web

---
 .../ErrorCode/ErrorCode.styles.module.scss    | 62 +++++++++++++++++++
 .../molecules/ErrorCode/ErrorCode.tsx         | 33 ++++++++++
 src/components/molecules/ErrorCode/index.ts   |  1 +
 3 files changed, 96 insertions(+)
 create mode 100644 src/components/molecules/ErrorCode/ErrorCode.styles.module.scss
 create mode 100644 src/components/molecules/ErrorCode/ErrorCode.tsx
 create mode 100644 src/components/molecules/ErrorCode/index.ts

diff --git a/src/components/molecules/ErrorCode/ErrorCode.styles.module.scss b/src/components/molecules/ErrorCode/ErrorCode.styles.module.scss
new file mode 100644
index 0000000..2522662
--- /dev/null
+++ b/src/components/molecules/ErrorCode/ErrorCode.styles.module.scss
@@ -0,0 +1,62 @@
+@import '@digitable-team/web-ui-components/src/scss/variables';
+
+.error {
+  width: 100%;
+  height: auto;
+  margin-top: 200px;
+}
+
+.error,
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.box {
+  width: 1070px;
+  margin-top: 92px;
+}
+
+.numeric {
+  font-size: 400px;
+  font-weight: 500;
+  line-height: 484px;
+  letter-spacing: 0;
+  color: $color-base;
+}
+
+.text {
+  width: 100%;
+  height: 170px;
+  font-size: 70px;
+  font-weight: 700;
+  text-align: center;
+  margin: 0;
+}
+
+.highlight-text {
+  color: $color-base;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 59px;
+  width: 365px;
+  border-radius: 36px;
+  margin: 50px;
+  border: 1px solid $color-base;
+  background: transparent;
+  color: $color-base;
+  outline: none;
+  font-size: 30px;
+  text-decoration: none;
+
+  &:hover {
+    color: $color-background-black;
+    background-color: $color-base;
+  }
+}
diff --git a/src/components/molecules/ErrorCode/ErrorCode.tsx b/src/components/molecules/ErrorCode/ErrorCode.tsx
new file mode 100644
index 0000000..19698e3
--- /dev/null
+++ b/src/components/molecules/ErrorCode/ErrorCode.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import cx from 'classnames'
+import { Link } from 'react-router-dom'
+
+import { Image } from 'src/components/atoms/Image'
+
+import css from './ErrorCode.styles.module.scss'
+
+export type ErrorCodeProps = {
+  imageUrl?: string
+  leftNumber?: number
+  rightNumber?: number
+  simpleText?: string
+  highlightText?: string
+}
+
+export const ErrorCode = ({ imageUrl, leftNumber, rightNumber, simpleText, highlightText }: ErrorCodeProps) => {
+  return (
+    <div className={css.error}>
+      <span className={css.numeric}>{leftNumber}</span>
+      <Image src={imageUrl} width="568" height="568" />
+      <span className={css.numeric}>{rightNumber}</span>
+      <div className={css.box}>
+        <span className={css.text}>{simpleText}</span>
+        <span className={cx(css.text, css.highlightText)}> {highlightText}</span>
+        <Link to="/" className={css.button}>
+          На главную
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/molecules/ErrorCode/index.ts b/src/components/molecules/ErrorCode/index.ts
new file mode 100644
index 0000000..b7d8e6e
--- /dev/null
+++ b/src/components/molecules/ErrorCode/index.ts
@@ -0,0 +1 @@
+export * from './ErrorCode'