Skip to content

Commit a4cff2a

Browse files
Uzhastin-Nikitathe-homeless-god
authored andcommitted
feat: relocate ErrorCode component from web
1 parent 4be092a commit a4cff2a

File tree

3 files changed

+96
-0
lines changed

3 files changed

+96
-0
lines changed
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@import '@digitable-team/web-ui-components/src/scss/variables';
2+
3+
.error {
4+
width: 100%;
5+
height: auto;
6+
margin-top: 200px;
7+
}
8+
9+
.error,
10+
.box {
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
flex-wrap: wrap;
15+
}
16+
17+
.box {
18+
width: 1070px;
19+
margin-top: 92px;
20+
}
21+
22+
.numeric {
23+
font-size: 400px;
24+
font-weight: 500;
25+
line-height: 484px;
26+
letter-spacing: 0;
27+
color: $color-base;
28+
}
29+
30+
.text {
31+
width: 100%;
32+
height: 170px;
33+
font-size: 70px;
34+
font-weight: 700;
35+
text-align: center;
36+
margin: 0;
37+
}
38+
39+
.highlight-text {
40+
color: $color-base;
41+
}
42+
43+
.button {
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
height: 59px;
48+
width: 365px;
49+
border-radius: 36px;
50+
margin: 50px;
51+
border: 1px solid $color-base;
52+
background: transparent;
53+
color: $color-base;
54+
outline: none;
55+
font-size: 30px;
56+
text-decoration: none;
57+
58+
&:hover {
59+
color: $color-background-black;
60+
background-color: $color-base;
61+
}
62+
}
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
3+
import cx from 'classnames'
4+
import { Link } from 'react-router-dom'
5+
6+
import { Image } from 'src/components/atoms/Image'
7+
8+
import css from './ErrorCode.styles.module.scss'
9+
10+
export type ErrorCodeProps = {
11+
imageUrl?: string
12+
leftNumber?: number
13+
rightNumber?: number
14+
simpleText?: string
15+
highlightText?: string
16+
}
17+
18+
export const ErrorCode = ({ imageUrl, leftNumber, rightNumber, simpleText, highlightText }: ErrorCodeProps) => {
19+
return (
20+
<div className={css.error}>
21+
<span className={css.numeric}>{leftNumber}</span>
22+
<Image src={imageUrl} width="568" height="568" />
23+
<span className={css.numeric}>{rightNumber}</span>
24+
<div className={css.box}>
25+
<span className={css.text}>{simpleText}</span>
26+
<span className={cx(css.text, css.highlightText)}> {highlightText}</span>
27+
<Link to="/" className={css.button}>
28+
На главную
29+
</Link>
30+
</div>
31+
</div>
32+
)
33+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './ErrorCode'

0 commit comments

Comments
 (0)