Merge branch 'main' of https://github.com/VividTruthKeeper/react-typescript-chess-federation
This commit is contained in:
commit
1f1d360542
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.db730c6d.css",
|
||||
"main.js": "/static/js/main.0c0f5ffb.js",
|
||||
"main.css": "/static/css/main.591e86bb.css",
|
||||
"main.js": "/static/js/main.6d6ffb25.js",
|
||||
"reactPlayerYouTube.js": "/static/js/reactPlayerYouTube.c5872fde.chunk.js",
|
||||
"reactPlayerSoundCloud.js": "/static/js/reactPlayerSoundCloud.00948ec5.chunk.js",
|
||||
"reactPlayerVimeo.js": "/static/js/reactPlayerVimeo.d95bae86.chunk.js",
|
||||
|
|
@ -15,43 +15,44 @@
|
|||
"reactPlayerKaltura.js": "/static/js/reactPlayerKaltura.600da222.chunk.js",
|
||||
"reactPlayerFilePlayer.js": "/static/js/reactPlayerFilePlayer.ddeae111.chunk.js",
|
||||
"reactPlayerPreview.js": "/static/js/reactPlayerPreview.ef7e27c0.chunk.js",
|
||||
"static/media/main_logo.svg": "/static/media/main_logo.c04943a779464d64798c31d280bcedbc.svg",
|
||||
"static/media/main_logo.svg": "/static/media/main_logo.b606ef6a0f03a8fbf06974ef9887dbe0.svg",
|
||||
"static/media/board.jpg": "/static/media/board.7cd7752d1f54d8310afd.jpg",
|
||||
"static/media/body-bg.jpg": "/static/media/body-bg.e4d54e8c6b38636c8650.jpg",
|
||||
"static/media/body-bg.jpg": "/static/media/body-bg.8f41b5883eec5bac865e.jpg",
|
||||
"static/media/match.jpg": "/static/media/match.0c0434bf0bc44e98f182.jpg",
|
||||
"static/media/magnus.jpg": "/static/media/magnus.3c389432bd61a6a39894.jpg",
|
||||
"static/media/instagram.svg": "/static/media/instagram.e9ea88c1ab1a66550f5be19dc25b0ba4.svg",
|
||||
"static/media/vk.svg": "/static/media/vk.2635b48f394b80d7c4823c18c53cd07d.svg",
|
||||
"static/media/bishop.svg": "/static/media/bishop.c8620c4e02603dfc637c35668d441141.svg",
|
||||
"static/media/green-bg.svg": "/static/media/green-bg.c239b1de556183bf9f0ed076f42979c3.svg",
|
||||
"static/media/instagram-grey.svg": "/static/media/instagram-grey.9cd72cfc6d69d87b9180deda77b76b65.svg",
|
||||
"static/media/facebook-green.svg": "/static/media/facebook-green.9d6e6fde5e9e24a892d458b980845b32.svg",
|
||||
"static/media/phone.svg": "/static/media/phone.bd38a0fb63c780d9bab69056e8648951.svg",
|
||||
"static/media/phone-gray.svg": "/static/media/phone-gray.0c566dbab67071056a9d80c039d4a33c.svg",
|
||||
"static/media/facebook.svg": "/static/media/facebook.373a12eacb417867677d38217520cfb5.svg",
|
||||
"static/media/pin.svg": "/static/media/pin.93b023f74f0b7ea5205928e30c12c850.svg",
|
||||
"static/media/search.svg": "/static/media/search.32c0ed9abc0d4791a3cdc76b2af3149c.svg",
|
||||
"static/media/twitter-gray.svg": "/static/media/twitter-gray.88df8ce739ac20401cc27946f6c01218.svg",
|
||||
"static/media/arrow-forward.svg": "/static/media/arrow-forward.754017f63e38ffffe63274078d685ce6.svg",
|
||||
"static/media/arrow-white-up.svg": "/static/media/arrow-white-up.77591a65c34a744f1c54430ae6f93063.svg",
|
||||
"static/media/arrow-down-black.svg": "/static/media/arrow-down-black.a403c3ef9ab85227cb9c96d454f3a182.svg",
|
||||
"static/media/email-black.svg": "/static/media/email-black.dbf6f57cb3c9d8683ee96dc2af4e581e.svg",
|
||||
"static/media/email.svg": "/static/media/email.2c5b64a08e8051ed9ffbc7a7712d83d8.svg",
|
||||
"static/media/arrow-right-green.svg": "/static/media/arrow-right-green.98e1ac6271e3e84192c1c1c403183dc0.svg",
|
||||
"static/media/arrow-left-green.svg": "/static/media/arrow-left-green.ed59df2d5468e9eba80beb5329930841.svg",
|
||||
"static/media/arrow-right-white.svg": "/static/media/arrow-right-white.9fd6a876484df7054ac53127b15a919a.svg",
|
||||
"static/media/play.svg": "/static/media/play.fb7f978d5d44e29b2ed10a809a23d069.svg",
|
||||
"static/media/arrow-left-white.svg": "/static/media/arrow-left-white.88a899ab3ff889b1759da73cbe61ba35.svg",
|
||||
"static/media/facebook-gray.svg": "/static/media/facebook-gray.0e9f27d52f1e270847a688dd030d3b46.svg",
|
||||
"static/media/youtube-gray.svg": "/static/media/youtube-gray.6a15826fedc242b2c065e3461ee54b0d.svg",
|
||||
"static/media/instagram.svg": "/static/media/instagram.e4c1ab279817c762b0a61b53693c98e2.svg",
|
||||
"static/media/empty-state.svg": "/static/media/empty-state.2080bf1ad1d613133598671c867d7887.svg",
|
||||
"static/media/vk.svg": "/static/media/vk.ed432917591bcf6e9e70314259820fd8.svg",
|
||||
"static/media/bishop.svg": "/static/media/bishop.6ab3ad2ec0b8f3dfa6daf543a254ae45.svg",
|
||||
"static/media/instagram-grey.svg": "/static/media/instagram-grey.6945d8eb25cd3cb68fb4dc7edf2a1627.svg",
|
||||
"static/media/green-bg.svg": "/static/media/green-bg.bb929bc799ae46fd985967e1ed032594.svg",
|
||||
"static/media/facebook-green.svg": "/static/media/facebook-green.8662c13666e0fe6dbabd4d42f4c78eb5.svg",
|
||||
"static/media/phone.svg": "/static/media/phone.83fbe4a767ea1d345818ad1997f6f1a8.svg",
|
||||
"static/media/facebook.svg": "/static/media/facebook.d516b05bccf9ba42c9ebeebb5c5da563.svg",
|
||||
"static/media/phone-gray.svg": "/static/media/phone-gray.ab66058d9ea4d9d4f5c86a129241aa7c.svg",
|
||||
"static/media/pin.svg": "/static/media/pin.93457ae61d05861caae21cb6d13a017f.svg",
|
||||
"static/media/search.svg": "/static/media/search.efc91ee258576b812d0376039b47c438.svg",
|
||||
"static/media/twitter-gray.svg": "/static/media/twitter-gray.87e193f804f44e76a1a7c7b0e3ec0bd7.svg",
|
||||
"static/media/arrow-forward.svg": "/static/media/arrow-forward.8cca7ca330daf5d7ca96aab1c16d815b.svg",
|
||||
"static/media/arrow-white-up.svg": "/static/media/arrow-white-up.31d7cf6a0925383682ba5a262fd25c66.svg",
|
||||
"static/media/arrow-down-black.svg": "/static/media/arrow-down-black.99e972ad37d9d54e24492a08eccd24d0.svg",
|
||||
"static/media/email-black.svg": "/static/media/email-black.4dc89886a8336e87fd16bf67324a79c8.svg",
|
||||
"static/media/email.svg": "/static/media/email.0733b334373a762ae29f1ed815d6bbc3.svg",
|
||||
"static/media/play.svg": "/static/media/play.2f8a2e6542a291522423fdd43435c004.svg",
|
||||
"static/media/arrow-right-green.svg": "/static/media/arrow-right-green.5c1e4882f87d26b972766fb76dd5b8f8.svg",
|
||||
"static/media/arrow-left-green.svg": "/static/media/arrow-left-green.8cc25d536a052b23feb77d41b122a977.svg",
|
||||
"static/media/arrow-right-white.svg": "/static/media/arrow-right-white.5a7fa3b17a994216052a3d2bd4a1951e.svg",
|
||||
"static/media/arrow-left-white.svg": "/static/media/arrow-left-white.14644903323e17d2174454e9e496b1ca.svg",
|
||||
"static/media/facebook-gray.svg": "/static/media/facebook-gray.fab613746ac467c401f1d579d5a36cb6.svg",
|
||||
"static/media/youtube-gray.svg": "/static/media/youtube-gray.65c29f8f14419766e7f8d5834d32f0ad.svg",
|
||||
"static/media/loader.svg": "/static/media/loader.def056eb338b529af5356891b76b9b2e.svg",
|
||||
"index.html": "/index.html",
|
||||
"static/media/arrow-next.svg": "/static/media/arrow-next.a8b56264b2410a3feb8f9f1ef11870ab.svg",
|
||||
"static/media/arrow-prev.svg": "/static/media/arrow-prev.4c99a4a2c601b7e03ec27cc2f59eef17.svg",
|
||||
"static/media/divider.svg": "/static/media/divider.dc6bb2d2be7d6f4878a7d6c7ba4e76cd.svg",
|
||||
"static/media/sharp.svg": "/static/media/sharp.4ed4aa62ad10367289e32bef3ac3a1c6.svg",
|
||||
"main.db730c6d.css.map": "/static/css/main.db730c6d.css.map",
|
||||
"main.0c0f5ffb.js.map": "/static/js/main.0c0f5ffb.js.map",
|
||||
"static/media/arrow-next.svg": "/static/media/arrow-next.6fcee1ce50014551f1f0d5cfe707bd8d.svg",
|
||||
"static/media/arrow-prev.svg": "/static/media/arrow-prev.ddc052d25af568ecc60d856e597672a3.svg",
|
||||
"static/media/divider.svg": "/static/media/divider.aba356f76f48970f0d53392ff4bf16e7.svg",
|
||||
"static/media/sharp.svg": "/static/media/sharp.349b867af4b23731d9deb15fe982230a.svg",
|
||||
"main.591e86bb.css.map": "/static/css/main.591e86bb.css.map",
|
||||
"main.6d6ffb25.js.map": "/static/js/main.6d6ffb25.js.map",
|
||||
"reactPlayerYouTube.c5872fde.chunk.js.map": "/static/js/reactPlayerYouTube.c5872fde.chunk.js.map",
|
||||
"reactPlayerSoundCloud.00948ec5.chunk.js.map": "/static/js/reactPlayerSoundCloud.00948ec5.chunk.js.map",
|
||||
"reactPlayerVimeo.d95bae86.chunk.js.map": "/static/js/reactPlayerVimeo.d95bae86.chunk.js.map",
|
||||
|
|
@ -67,7 +68,7 @@
|
|||
"reactPlayerPreview.ef7e27c0.chunk.js.map": "/static/js/reactPlayerPreview.ef7e27c0.chunk.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.db730c6d.css",
|
||||
"static/js/main.0c0f5ffb.js"
|
||||
"static/css/main.591e86bb.css",
|
||||
"static/js/main.6d6ffb25.js"
|
||||
]
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Chess Federation"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Chess Federation</title><script defer="defer" src="/static/js/main.0c0f5ffb.js"></script><link href="/static/css/main.db730c6d.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Chess Federation"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Chess Federation</title><script defer="defer" src="/static/js/main.6d6ffb25.js"></script><link href="/static/css/main.591e86bb.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 975 B After Width: | Height: | Size: 975 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 779 B After Width: | Height: | Size: 779 B |
|
Before Width: | Height: | Size: 767 B After Width: | Height: | Size: 767 B |
|
Before Width: | Height: | Size: 508 B After Width: | Height: | Size: 508 B |
|
Before Width: | Height: | Size: 500 B After Width: | Height: | Size: 500 B |
|
Before Width: | Height: | Size: 782 B After Width: | Height: | Size: 782 B |
|
Before Width: | Height: | Size: 778 B After Width: | Height: | Size: 778 B |
|
Before Width: | Height: | Size: 1018 B After Width: | Height: | Size: 1018 B |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 213 KiB |
|
Before Width: | Height: | Size: 227 B After Width: | Height: | Size: 227 B |
|
Before Width: | Height: | Size: 968 B After Width: | Height: | Size: 968 B |
|
Before Width: | Height: | Size: 963 B After Width: | Height: | Size: 963 B |
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#01815E" fill-opacity="0.1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92ZM103.996 140H97.0314H103.996Z" fill="white"/>
|
||||
<path d="M103.996 140H97.0314M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92Z" stroke="#01815E" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M116.612 64.3426C116.612 96.5657 145.633 123.118 183 126.703C178.317 132.461 171.086 136.368 162.847 136.981V137H95.7431C87.6013 137 74 133.57 74 118.548C74 103.527 84.5742 100.097 95.7431 100.097C96.218 100.097 96.6891 100.112 97.1559 100.141C96.8316 98.4556 96.7746 96.7184 96.6623 94.9474C95.9038 82.9842 101.123 67.907 116.63 63C116.618 63.4473 116.612 63.8944 116.612 64.3426ZM127.116 114.758C124.078 114.758 121.614 117.192 121.614 120.195C121.614 123.198 124.078 125.632 127.116 125.632C130.155 125.632 132.618 123.198 132.618 120.195C132.618 117.192 130.155 114.758 127.116 114.758Z" fill="#01815E" fill-opacity="0.1"/>
|
||||
<path d="M127.5 126C130.538 126 133 123.538 133 120.5C133 117.462 130.538 115 127.5 115C124.462 115 122 117.462 122 120.5C122 123.538 124.462 126 127.5 126Z" stroke="#01815E" stroke-width="2.5"/>
|
||||
<path d="M112 109L119 103.507L112 98.2776" stroke="#01815E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M143 109L136 103.507L143 98.2776" stroke="#01815E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M137 67C143.509 68.7226 148.648 73.8129 150.44 80.2932" stroke="#01815E" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path d="M158 50C159.657 50 161 48.6569 161 47C161 45.3431 159.657 44 158 44C156.343 44 155 45.3431 155 47C155 48.6569 156.343 50 158 50Z" stroke="#01815E" stroke-width="2"/>
|
||||
<path d="M189 66C190.657 66 192 64.6569 192 63C192 61.3431 190.657 60 189 60C187.343 60 186 61.3431 186 63C186 64.6569 187.343 66 189 66Z" fill="#01815E"/>
|
||||
<path d="M165.757 57.7573L174.116 66.1156M174.243 57.7573L165.884 66.1156L174.243 57.7573Z" stroke="#01815E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M71.4038 75.5962L77.4038 81.5962M77.4038 75.5962L71.4038 81.5962L77.4038 75.5962Z" stroke="#01815E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85 69C86.6569 69 88 67.6569 88 66C88 64.3431 86.6569 63 85 63C83.3431 63 82 64.3431 82 66C82 67.6569 83.3431 69 85 69Z" fill="#01815E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 744 B After Width: | Height: | Size: 744 B |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 528 KiB After Width: | Height: | Size: 528 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 773 B After Width: | Height: | Size: 773 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 177 B After Width: | Height: | Size: 177 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 724 B After Width: | Height: | Size: 724 B |
|
|
@ -16663,9 +16663,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.14.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
|
||||
"integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
|
||||
"version": "5.14.2",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
|
||||
"integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.2",
|
||||
"acorn": "^8.5.0",
|
||||
|
|
@ -30011,9 +30011,9 @@
|
|||
}
|
||||
},
|
||||
"terser": {
|
||||
"version": "5.14.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
|
||||
"integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
|
||||
"version": "5.14.2",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
|
||||
"integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
|
||||
"requires": {
|
||||
"@jridgewell/source-map": "^0.3.2",
|
||||
"acorn": "^8.5.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
// Icons
|
||||
import cloud from "../../icons/empty-state.svg";
|
||||
|
||||
// Types
|
||||
interface Props {
|
||||
page?: boolean;
|
||||
}
|
||||
|
||||
const EmptyState = ({ page }: Props) => {
|
||||
return (
|
||||
<div className={page ? "empty-state page" : "empty-state"}>
|
||||
<div className="empty-img">
|
||||
<img src={cloud} alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Ой...</h1>
|
||||
<h2>{"Что-то пошло не так :("}</h2>
|
||||
{page ? <h2>Попробуйте перезагрузить страницу</h2> : ""}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmptyState;
|
||||
|
|
@ -15,7 +15,6 @@ const VideoPlayer = ({ videoUrl }: Props) => {
|
|||
<div className="player">
|
||||
<ReactPlayer
|
||||
url={hosting + videoUrl}
|
||||
light
|
||||
controls
|
||||
playIcon={videoUrl.length > 0 ? <PlayIcon /> : undefined}
|
||||
volume={1}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,12 @@ import { Swiper, SwiperSlide } from "swiper/react";
|
|||
import "swiper/css";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Components
|
||||
import VideoPlayer from "../global/VideoPlayer";
|
||||
import Calendar from "../global/Calendar";
|
||||
import EmptyState from "../global/EmptyState";
|
||||
|
||||
// Types
|
||||
import { playerType } from "../../types/players";
|
||||
|
|
@ -44,7 +46,9 @@ const CalendarSection = () => {
|
|||
<div className="calendars">
|
||||
<div className="calendars-left">
|
||||
{video.length > 1 ? (
|
||||
<VideoPlayer videoUrl={video} />
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<VideoPlayer videoUrl={video} />
|
||||
</ErrorBoundary>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
|
|
@ -90,7 +94,9 @@ const CalendarSection = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="calendars-right">
|
||||
<Calendar />
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<Calendar />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// Modules
|
||||
import { Link } from "react-router-dom";
|
||||
// import { Link } from "react-router-dom";
|
||||
|
||||
// Icons
|
||||
import arrowNext from "../../icons/arrow-right-white.svg";
|
||||
// import arrowNext from "../../icons/arrow-right-white.svg";
|
||||
|
||||
// Types
|
||||
import { SlideProps } from "../../types/mainSliderSlide";
|
||||
|
|
@ -22,12 +22,12 @@ const MainSliderSlide = ({ id, img, header, txt }: SlideProps) => {
|
|||
<div className="swiper-slider-content-inner">
|
||||
<h3>{header}</h3>
|
||||
<p>{txt}</p>
|
||||
<Link to={""}>
|
||||
{/* <Link to={""}>
|
||||
<span>Click the button</span>
|
||||
<div>
|
||||
<img src={arrowNext} alt="" />
|
||||
</div>
|
||||
</Link>
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
// Modules
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Components
|
||||
import SectionTitle from "../global/SectionTitle";
|
||||
import SearchTable from "../global/SearchTable";
|
||||
import EmptyState from "../global/EmptyState";
|
||||
|
||||
const PlayerRating = () => {
|
||||
return (
|
||||
|
|
@ -11,7 +13,9 @@ const PlayerRating = () => {
|
|||
<div className="rating-inner">
|
||||
<SectionTitle title={"Рейтинг игроков"} />
|
||||
<div className="rating-content">
|
||||
<SearchTable />
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<SearchTable />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import React, { PropsWithChildren } from "react";
|
||||
|
||||
interface Props {
|
||||
givenClass: string;
|
||||
children: PropsWithChildren<React.ReactNode>;
|
||||
}
|
||||
|
||||
const Wrapper = ({ givenClass, children }: Props) => {
|
||||
return <p className={givenClass}>{children}</p>;
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#01815E" fill-opacity="0.1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92ZM103.996 140H97.0314H103.996Z" fill="white"/>
|
||||
<path d="M103.996 140H97.0314M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92Z" stroke="#01815E" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M116.612 64.3426C116.612 96.5657 145.633 123.118 183 126.703C178.317 132.461 171.086 136.368 162.847 136.981V137H95.7431C87.6013 137 74 133.57 74 118.548C74 103.527 84.5742 100.097 95.7431 100.097C96.218 100.097 96.6891 100.112 97.1559 100.141C96.8316 98.4556 96.7746 96.7184 96.6623 94.9474C95.9038 82.9842 101.123 67.907 116.63 63C116.618 63.4473 116.612 63.8944 116.612 64.3426ZM127.116 114.758C124.078 114.758 121.614 117.192 121.614 120.195C121.614 123.198 124.078 125.632 127.116 125.632C130.155 125.632 132.618 123.198 132.618 120.195C132.618 117.192 130.155 114.758 127.116 114.758Z" fill="#01815E" fill-opacity="0.1"/>
|
||||
<path d="M127.5 126C130.538 126 133 123.538 133 120.5C133 117.462 130.538 115 127.5 115C124.462 115 122 117.462 122 120.5C122 123.538 124.462 126 127.5 126Z" stroke="#01815E" stroke-width="2.5"/>
|
||||
<path d="M112 109L119 103.507L112 98.2776" stroke="#01815E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M143 109L136 103.507L143 98.2776" stroke="#01815E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M137 67C143.509 68.7226 148.648 73.8129 150.44 80.2932" stroke="#01815E" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path d="M158 50C159.657 50 161 48.6569 161 47C161 45.3431 159.657 44 158 44C156.343 44 155 45.3431 155 47C155 48.6569 156.343 50 158 50Z" stroke="#01815E" stroke-width="2"/>
|
||||
<path d="M189 66C190.657 66 192 64.6569 192 63C192 61.3431 190.657 60 189 60C187.343 60 186 61.3431 186 63C186 64.6569 187.343 66 189 66Z" fill="#01815E"/>
|
||||
<path d="M165.757 57.7573L174.116 66.1156M174.243 57.7573L165.884 66.1156L174.243 57.7573Z" stroke="#01815E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M71.4038 75.5962L77.4038 81.5962M77.4038 75.5962L71.4038 81.5962L77.4038 75.5962Z" stroke="#01815E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M85 69C86.6569 69 88 67.6569 88 66C88 64.3431 86.6569 63 85 63C83.3431 63 82 64.3431 82 66C82 67.6569 83.3431 69 85 69Z" fill="#01815E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 213 KiB |
|
|
@ -1,12 +1,12 @@
|
|||
// Modules
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Helpers
|
||||
import { getAbout, getVideos } from "../helpers/apiRequests";
|
||||
import { highlightColor } from "../helpers/otherVariables";
|
||||
import { hosting } from "../links";
|
||||
|
||||
// Hooks
|
||||
import useMediaQuery from "../hooks/useMediaQuery";
|
||||
|
||||
|
|
@ -15,6 +15,7 @@ import Statistic from "../components/about_us/Statistic";
|
|||
import VideoPlayer from "../components/global/VideoPlayer";
|
||||
import SectionTitle from "../components/global/SectionTitle";
|
||||
import TeamSlider from "../components/about_us/TeamSlider";
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
|
||||
// Types
|
||||
import { Video } from "../types/video";
|
||||
|
|
@ -53,145 +54,151 @@ const AboutUs = () => {
|
|||
const breakpoint = useMediaQuery("(max-width: 500px)");
|
||||
|
||||
return (
|
||||
<main className="about-us">
|
||||
<div className="container">
|
||||
<div className="about-us-inner">
|
||||
<div className="about-us-top">
|
||||
<div className="aut-left">
|
||||
{about.id !== -1 ? (
|
||||
<h2>{about.header}</h2>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"5.4rem"}
|
||||
width={"45%"}
|
||||
/>
|
||||
)}
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="about-us">
|
||||
<div className="container">
|
||||
<div className="about-us-inner">
|
||||
<div className="about-us-top">
|
||||
<div className="aut-left">
|
||||
{about.id !== -1 ? (
|
||||
<h2>{about.header}</h2>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"5.4rem"}
|
||||
width={"45%"}
|
||||
/>
|
||||
)}
|
||||
|
||||
{about.id !== -1 ? (
|
||||
<p>{about.txt}</p>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"1.4rem"}
|
||||
width={"100%"}
|
||||
count={12}
|
||||
/>
|
||||
)}
|
||||
{about.id !== -1 ? (
|
||||
<p>{about.txt}</p>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"1.4rem"}
|
||||
width={"100%"}
|
||||
count={12}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="aut-right">
|
||||
{about.id !== -1 ? (
|
||||
<div>
|
||||
<img
|
||||
src={hosting + "/storage/app/media" + about.img}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Skeleton height={"49.8rem"} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="aut-right">
|
||||
<div className="about-us-middle">
|
||||
{about.id !== -1 ? (
|
||||
<div>
|
||||
<img
|
||||
src={hosting + "/storage/app/media" + about.img}
|
||||
alt=""
|
||||
<div className="aub-wrapper">
|
||||
<Statistic
|
||||
count={about.tournment_number}
|
||||
title={about.tournment_title}
|
||||
/>
|
||||
<Statistic
|
||||
count={about.organisation_number}
|
||||
title={about.organisation_title}
|
||||
/>
|
||||
<Statistic
|
||||
count={about.graduate_number}
|
||||
title={about.graduate_title}
|
||||
/>
|
||||
<Statistic
|
||||
count={about.places_number}
|
||||
title={about.places_title}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Skeleton height={"49.8rem"} />
|
||||
<div className="group-skeleton">
|
||||
<div className="group">
|
||||
<Skeleton
|
||||
className="fchild"
|
||||
highlightColor={highlightColor}
|
||||
width={"13.5rem"}
|
||||
height={"13.5rem"}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.14rem"}
|
||||
width={breakpoint ? "13rem" : "18rem"}
|
||||
count={2}
|
||||
/>
|
||||
</div>
|
||||
<div className="group">
|
||||
<Skeleton
|
||||
className="fchild"
|
||||
highlightColor={highlightColor}
|
||||
width={"13.5rem"}
|
||||
height={"13.5rem"}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.14rem"}
|
||||
width={breakpoint ? "13rem" : "18rem"}
|
||||
count={2}
|
||||
/>
|
||||
</div>
|
||||
<div className="group">
|
||||
<Skeleton
|
||||
className="fchild"
|
||||
highlightColor={highlightColor}
|
||||
width={"13.5rem"}
|
||||
height={"13.5rem"}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.14rem"}
|
||||
width={breakpoint ? "13rem" : "18rem"}
|
||||
count={2}
|
||||
/>
|
||||
</div>
|
||||
<div className="group">
|
||||
<Skeleton
|
||||
className="fchild"
|
||||
highlightColor={highlightColor}
|
||||
width={"13.5rem"}
|
||||
height={"13.5rem"}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.14rem"}
|
||||
width={breakpoint ? "13rem" : "18rem"}
|
||||
count={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="about-us-slider">
|
||||
<SectionTitle title="Сборная Туркменистана" />
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<TeamSlider />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<div className="about-us-video">
|
||||
<SectionTitle title="Вводный видео ролик" />
|
||||
{video[0].id !== -1 ? (
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<VideoPlayer videoUrl={video[0].video} />
|
||||
</ErrorBoundary>
|
||||
) : (
|
||||
<Skeleton highlightColor={highlightColor} height={"40rem"} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-us-middle">
|
||||
{about.id !== -1 ? (
|
||||
<div className="aub-wrapper">
|
||||
<Statistic
|
||||
count={about.tournment_number}
|
||||
title={about.tournment_title}
|
||||
/>
|
||||
<Statistic
|
||||
count={about.organisation_number}
|
||||
title={about.organisation_title}
|
||||
/>
|
||||
<Statistic
|
||||
count={about.graduate_number}
|
||||
title={about.graduate_title}
|
||||
/>
|
||||
<Statistic
|
||||
count={about.places_number}
|
||||
title={about.places_title}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="group-skeleton">
|
||||
<div className="group">
|
||||
<Skeleton
|
||||
className="fchild"
|
||||
highlightColor={highlightColor}
|
||||
width={"13.5rem"}
|
||||
height={"13.5rem"}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.14rem"}
|
||||
width={breakpoint ? "13rem" : "18rem"}
|
||||
count={2}
|
||||
/>
|
||||
</div>
|
||||
<div className="group">
|
||||
<Skeleton
|
||||
className="fchild"
|
||||
highlightColor={highlightColor}
|
||||
width={"13.5rem"}
|
||||
height={"13.5rem"}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.14rem"}
|
||||
width={breakpoint ? "13rem" : "18rem"}
|
||||
count={2}
|
||||
/>
|
||||
</div>
|
||||
<div className="group">
|
||||
<Skeleton
|
||||
className="fchild"
|
||||
highlightColor={highlightColor}
|
||||
width={"13.5rem"}
|
||||
height={"13.5rem"}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.14rem"}
|
||||
width={breakpoint ? "13rem" : "18rem"}
|
||||
count={2}
|
||||
/>
|
||||
</div>
|
||||
<div className="group">
|
||||
<Skeleton
|
||||
className="fchild"
|
||||
highlightColor={highlightColor}
|
||||
width={"13.5rem"}
|
||||
height={"13.5rem"}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.14rem"}
|
||||
width={breakpoint ? "13rem" : "18rem"}
|
||||
count={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="about-us-slider">
|
||||
<SectionTitle title="Сборная Туркменистана" />
|
||||
<TeamSlider />
|
||||
</div>
|
||||
<div className="about-us-video">
|
||||
<SectionTitle title="Вводный видео ролик" />
|
||||
{video[0].id !== -1 ? (
|
||||
<VideoPlayer videoUrl={video[0].video} />
|
||||
) : (
|
||||
<Skeleton highlightColor={highlightColor} height={"40rem"} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// Modules
|
||||
import { useEffect } from "react";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Icons
|
||||
import bg from "../icons/green-bg.svg";
|
||||
|
|
@ -7,6 +8,7 @@ import bg from "../icons/green-bg.svg";
|
|||
// Components
|
||||
import ContactForm from "../components/contact/ContactForm";
|
||||
import Map from "../components/global/Map";
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
|
||||
const Contacts = () => {
|
||||
useEffect(() => {
|
||||
|
|
@ -14,17 +16,23 @@ const Contacts = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<main className="contact">
|
||||
<div className="contact-bg">
|
||||
<img src={bg} alt="" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="contact-inner">
|
||||
<ContactForm />
|
||||
<Map />
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="contact">
|
||||
<div className="contact-bg">
|
||||
<img src={bg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div className="container">
|
||||
<div className="contact-inner">
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<ContactForm />
|
||||
</ErrorBoundary>
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<Map />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Components
|
||||
import EventAside from "../components/event_item/EventAside";
|
||||
import EventDate from "../components/global/EventDate";
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
|
||||
// Helpers
|
||||
import { getEvent } from "../helpers/apiRequests";
|
||||
|
|
@ -44,64 +46,68 @@ const EventItem = () => {
|
|||
}, [eventId]);
|
||||
|
||||
return (
|
||||
<main className="eventitem">
|
||||
<div className="container">
|
||||
<div className="eventitem-inner">
|
||||
<div className="eventitem-content">
|
||||
{eventData.id !== -1 && !loader ? (
|
||||
<div className="eventitem-top">
|
||||
<EventDate time={"00:00"} date={eventData.published_at} />
|
||||
<h2>{eventData.title}</h2>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Skeleton highlightColor={highlightColor} height={"2rem"} />
|
||||
<Skeleton highlightColor={highlightColor} height={"4rem"} />
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"47.8rem"}
|
||||
style={{
|
||||
borderRadius: "0.5rem",
|
||||
padding: "2.2rem 0 ",
|
||||
display: "block",
|
||||
}}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
count={15}
|
||||
height={"2rem"}
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="eventitem">
|
||||
<div className="container">
|
||||
<div className="eventitem-inner">
|
||||
<div className="eventitem-content">
|
||||
{eventData.id !== -1 && !loader ? (
|
||||
<div className="eventitem-top">
|
||||
<EventDate time={"00:00"} date={eventData.published_at} />
|
||||
<h2>{eventData.title}</h2>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0",
|
||||
gap: "1rem",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{eventData.id !== -1 && !loader ? (
|
||||
<div className="eventitem-bottom">
|
||||
<div className="eventitem-img">
|
||||
<img src={eventData.featured_images[0].path} alt="" />
|
||||
>
|
||||
<Skeleton highlightColor={highlightColor} height={"2rem"} />
|
||||
<Skeleton highlightColor={highlightColor} height={"4rem"} />
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"47.8rem"}
|
||||
style={{
|
||||
borderRadius: "0.5rem",
|
||||
padding: "2.2rem 0 ",
|
||||
display: "block",
|
||||
}}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
count={15}
|
||||
height={"2rem"}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="eventitem-content"
|
||||
dangerouslySetInnerHTML={{ __html: eventData.content_html }}
|
||||
></div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
)}
|
||||
{eventData.id !== -1 && !loader ? (
|
||||
<div className="eventitem-bottom">
|
||||
<div className="eventitem-img">
|
||||
<img src={eventData.featured_images[0].path} alt="" />
|
||||
</div>
|
||||
<div
|
||||
className="eventitem-content"
|
||||
dangerouslySetInnerHTML={{ __html: eventData.content_html }}
|
||||
></div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<EventAside />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<EventAside />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Icons
|
||||
import left from "../icons/arrow-left-white.svg";
|
||||
|
|
@ -10,6 +11,7 @@ import right from "../icons/arrow-right-white.svg";
|
|||
// Components
|
||||
import Event from "../components/global/Event";
|
||||
import SectionTitle from "../components/global/SectionTitle";
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
|
||||
// Types
|
||||
import { eventType } from "../types/eventProps";
|
||||
|
|
@ -55,117 +57,125 @@ const Events = () => {
|
|||
const breakpoints = useMediaQuery("(max-width: 550px");
|
||||
|
||||
return (
|
||||
<main className="events-page">
|
||||
<div className="container">
|
||||
<div className="event-page-wrapper">
|
||||
<SectionTitle title={"События и новости"} />
|
||||
<div className="events-page-inner">
|
||||
{events.loaded
|
||||
? events.data.map((evnt) => {
|
||||
return (
|
||||
<Event
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="events-page">
|
||||
<div className="container">
|
||||
<div className="event-page-wrapper">
|
||||
<SectionTitle title={"События и новости"} />
|
||||
<div className="events-page-inner">
|
||||
{events.loaded
|
||||
? events.data.map((evnt) => {
|
||||
return (
|
||||
<Event
|
||||
key={uuidv4()}
|
||||
id={evnt.id}
|
||||
image={evnt.featured_images[0].path}
|
||||
title={evnt.title}
|
||||
time={"00:00"}
|
||||
date={evnt.published_at}
|
||||
/>
|
||||
);
|
||||
})
|
||||
: [
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
].map(() => (
|
||||
<div
|
||||
key={uuidv4()}
|
||||
id={evnt.id}
|
||||
image={evnt.featured_images[0].path}
|
||||
title={evnt.title}
|
||||
time={"00:00"}
|
||||
date={evnt.published_at}
|
||||
/>
|
||||
);
|
||||
})
|
||||
: [
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
].map(() => (
|
||||
<div
|
||||
key={uuidv4()}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Skeleton
|
||||
height={breakpoints ? "25rem" : "30rem"}
|
||||
highlightColor={highlightColor}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton height={"2rem"} highlightColor={highlightColor} />
|
||||
<Skeleton height={"4rem"} highlightColor={highlightColor} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="events-page-bottom">
|
||||
<div className="events-page-nav">
|
||||
<div className="events-page-nav-left">
|
||||
{events.data[0].id !== -1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="events-page-btn"
|
||||
disabled={events.meta.current_page < 2 ? true : false}
|
||||
>
|
||||
<img src={left} alt="" />
|
||||
</button>
|
||||
) : (
|
||||
<Skeleton height={"5rem"} width={"5rem"} />
|
||||
)}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Skeleton
|
||||
height={breakpoints ? "25rem" : "30rem"}
|
||||
highlightColor={highlightColor}
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"2rem"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"4rem"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="events-page-bottom">
|
||||
<div className="events-page-nav">
|
||||
<div className="events-page-nav-left">
|
||||
{events.data[0].id !== -1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="events-page-btn"
|
||||
disabled={events.meta.current_page < 2 ? true : false}
|
||||
>
|
||||
<img src={left} alt="" />
|
||||
</button>
|
||||
) : (
|
||||
<Skeleton height={"5rem"} width={"5rem"} />
|
||||
)}
|
||||
|
||||
<span className="event-page-number">
|
||||
{events.meta.current_page > -1 ? (
|
||||
events.meta.current_page
|
||||
<span className="event-page-number">
|
||||
{events.meta.current_page > -1 ? (
|
||||
events.meta.current_page
|
||||
) : (
|
||||
<Skeleton height={"2rem"} width={"2rem"} />
|
||||
)}
|
||||
</span>
|
||||
{events.data[0].id !== -1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="events-page-btn"
|
||||
disabled={
|
||||
events.meta.current_page === events.meta.total - 1
|
||||
? true
|
||||
: false
|
||||
}
|
||||
>
|
||||
<img src={right} alt="" />
|
||||
</button>
|
||||
) : (
|
||||
<Skeleton height={"2rem"} width={"2rem"} />
|
||||
<Skeleton height={"5rem"} width={"5rem"} />
|
||||
)}
|
||||
</span>
|
||||
{events.data[0].id !== -1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="events-page-btn"
|
||||
disabled={
|
||||
events.meta.current_page === events.meta.total - 1
|
||||
? true
|
||||
: false
|
||||
}
|
||||
>
|
||||
<img src={right} alt="" />
|
||||
</button>
|
||||
) : (
|
||||
<Skeleton height={"5rem"} width={"5rem"} />
|
||||
)}
|
||||
</div>
|
||||
<div className="events-page-nav-right">
|
||||
<span>
|
||||
{events.meta.total > -1 ? (
|
||||
`Всего ${events.meta.total - 1} ${
|
||||
events.meta.total - 1 === 1
|
||||
? "страница"
|
||||
: events.meta.total - 1 < 5
|
||||
? "страницы"
|
||||
: "страниц"
|
||||
}`
|
||||
) : (
|
||||
<Skeleton height={"2rem"} width={"15rem"} />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="events-page-nav-right">
|
||||
<span>
|
||||
{events.meta.total > -1 ? (
|
||||
`Всего ${events.meta.total - 1} ${
|
||||
events.meta.total - 1 === 1
|
||||
? "страница"
|
||||
: events.meta.total - 1 < 5
|
||||
? "страницы"
|
||||
: "страниц"
|
||||
}`
|
||||
) : (
|
||||
<Skeleton height={"2rem"} width={"15rem"} />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// Modules
|
||||
import { useEffect } from "react";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Components
|
||||
import MainSlider from "../components/main/MainSlider";
|
||||
|
|
@ -7,19 +8,34 @@ import EventsSection from "../components/main/EventsSection";
|
|||
import PlayerRating from "../components/main/PlayerRatingSection";
|
||||
import Partners from "../components/main/PartnersSection";
|
||||
import CalendarSection from "../components/main/CalendarSection";
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
|
||||
const Main = () => {
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
return (
|
||||
<main className="main">
|
||||
<MainSlider />
|
||||
<EventsSection />
|
||||
<CalendarSection />
|
||||
<PlayerRating />
|
||||
<Partners />
|
||||
</main>
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="main">
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<MainSlider />
|
||||
</ErrorBoundary>
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<EventsSection />
|
||||
</ErrorBoundary>
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<CalendarSection />
|
||||
</ErrorBoundary>
|
||||
|
||||
{/* Not wrapping PlayerRating since it is not a component that may break */}
|
||||
<PlayerRating />
|
||||
{/* Not wrapping PlayerRating since it is not a component that may break */}
|
||||
|
||||
<ErrorBoundary fallback={<EmptyState />}>
|
||||
<Partners />
|
||||
</ErrorBoundary>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Helpers
|
||||
import { getPlayerInfo } from "../helpers/apiRequests";
|
||||
|
|
@ -14,6 +15,9 @@ import useMediaQuery from "../hooks/useMediaQuery";
|
|||
import { hosting } from "../links";
|
||||
import { players } from "../links";
|
||||
|
||||
// Components
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
|
||||
// Types
|
||||
import { Player } from "../types/players";
|
||||
|
||||
|
|
@ -39,128 +43,31 @@ const PlayerProfile = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<main className="pp">
|
||||
<div className="container">
|
||||
<div className="pp-inner">
|
||||
<div className={playerInfo.id === -1 ? "pp-left" : "pp-left ready"}>
|
||||
{playerInfo.id !== -1 ? (
|
||||
<div>
|
||||
<img
|
||||
src={hosting + "/storage/app/media" + playerInfo.img}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={breakpoints["1200"] ? "43.8rem" : "100%"}
|
||||
width={"100%"}
|
||||
style={{ maxWidth: "35rem" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="pp-right">
|
||||
<div className="pp-right-top">
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="pp">
|
||||
<div className="container">
|
||||
<div className="pp-inner">
|
||||
<div className={playerInfo.id === -1 ? "pp-left" : "pp-left ready"}>
|
||||
{playerInfo.id !== -1 ? (
|
||||
<h3>{playerInfo.name}</h3>
|
||||
<div>
|
||||
<img
|
||||
src={hosting + "/storage/app/media" + playerInfo.img}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={breakpoints["1200"] ? "43.8rem" : "100%"}
|
||||
width={"100%"}
|
||||
style={{ maxWidth: breakpoints["750"] ? "unset" : "23rem" }}
|
||||
height={"3.8rem"}
|
||||
style={{ maxWidth: "35rem" }}
|
||||
/>
|
||||
)}
|
||||
<div className="pp-right-top-content">
|
||||
<ul>
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">ID</span>
|
||||
<p>{playerInfo.id}</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Звание</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].title} */}
|
||||
Гроссмейстер
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Год рождения</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].date_of_birth} */}
|
||||
1990
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pp-right-bottom">
|
||||
<h3>
|
||||
<div className="pp-right">
|
||||
<div className="pp-right-top">
|
||||
{playerInfo.id !== -1 ? (
|
||||
"Rating"
|
||||
<h3>{playerInfo.name}</h3>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
|
|
@ -169,97 +76,198 @@ const PlayerProfile = () => {
|
|||
height={"3.8rem"}
|
||||
/>
|
||||
)}
|
||||
</h3>
|
||||
<div className="pp-right-bottom-content">
|
||||
<ul>
|
||||
<div className="pp-right-top-content">
|
||||
<ul>
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">ID</span>
|
||||
<p>{playerInfo.id}</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Звание</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].title} */}
|
||||
Гроссмейстер
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Год рождения</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].date_of_birth} */}
|
||||
1990
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pp-right-bottom">
|
||||
<h3>
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Classic</span>
|
||||
<p>{playerInfo.average}</p>
|
||||
</li>
|
||||
"Rating"
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "23rem",
|
||||
}}
|
||||
height={"3.8rem"}
|
||||
/>
|
||||
)}
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Rapid</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].rapid} */}
|
||||
2847
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Blitz</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].blitz} */}
|
||||
2847
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</h3>
|
||||
<div className="pp-right-bottom-content">
|
||||
<ul>
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Classic</span>
|
||||
<p>{playerInfo.average}</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Rapid</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].rapid} */}
|
||||
2847
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
{playerInfo.id !== -1 ? (
|
||||
<li>
|
||||
<span className="pp-identifier">Blitz</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].blitz} */}
|
||||
2847
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: breakpoints["750"] ? "unset" : "20rem",
|
||||
}}
|
||||
height={"5.2rem"}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,65 +1,69 @@
|
|||
// Modules
|
||||
import { useEffect } from "react";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Components
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
|
||||
// Images
|
||||
import magnus from "../images/magnus.jpg";
|
||||
|
||||
// Link: /profile
|
||||
|
||||
const Profile = () => {
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
return (
|
||||
<main className="profile">
|
||||
<div className="container">
|
||||
<div className="profile-inner">
|
||||
<div className="profile-container">
|
||||
<div className="profile-left">
|
||||
<div className="profile-img">
|
||||
<img src={magnus} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-right">
|
||||
<div className="profile-data">
|
||||
<h3 className="profile-name">Carlsen, Magnus</h3>
|
||||
<div className="profile-data-wrapper">
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="profile">
|
||||
<div className="container">
|
||||
<div className="profile-inner">
|
||||
<div className="profile-container">
|
||||
<div className="profile-left">
|
||||
<div className="profile-img">
|
||||
<img src={magnus} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-rating">
|
||||
<h3 className="profile-name profile-rating">Rating</h3>
|
||||
<div className="profile-data-wrapper">
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
<div className="profile-right">
|
||||
<div className="profile-data">
|
||||
<h3 className="profile-name">Carlsen, Magnus</h3>
|
||||
<div className="profile-data-wrapper">
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<div className="profile-rating">
|
||||
<h3 className="profile-name profile-rating">Rating</h3>
|
||||
<div className="profile-data-wrapper">
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
<div className="profile-item">
|
||||
<span>ID</span>
|
||||
<p>1503014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@ import { Link } from "react-router-dom";
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Components
|
||||
import SectionTitle from "../components/global/SectionTitle";
|
||||
import SearchTable from "../components/global/SearchTable";
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
|
||||
// Helpers
|
||||
import { getTeam } from "../helpers/apiRequests";
|
||||
|
|
@ -42,75 +44,77 @@ const Rating = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<main className="rating">
|
||||
<div className="container">
|
||||
<div className="rating-inner">
|
||||
<SectionTitle title={"Лучшие игроки"} />
|
||||
<div className="rating-content">
|
||||
<div
|
||||
className={players ? "rating-banner" : "rating-banner disabled"}
|
||||
>
|
||||
{players[0].id !== -1
|
||||
? players.map((player: Player) => {
|
||||
if (player.national === 0) {
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="rating">
|
||||
<div className="container">
|
||||
<div className="rating-inner">
|
||||
<SectionTitle title={"Лучшие игроки"} />
|
||||
<div className="rating-content">
|
||||
<div
|
||||
className={players ? "rating-banner" : "rating-banner disabled"}
|
||||
>
|
||||
{players[0].id !== -1
|
||||
? players.map((player: Player) => {
|
||||
if (player.national === 0) {
|
||||
return (
|
||||
<Link
|
||||
key={uuidv4()}
|
||||
className="rating-banner-block"
|
||||
to={`/player/${player.id}`}
|
||||
>
|
||||
<div className="rating-banner-img">
|
||||
<img src={hosting + player.img} alt="" />
|
||||
</div>
|
||||
<div className="rating-banner-text">
|
||||
<h4>{player.name}</h4>
|
||||
<h5>{player.average}</h5>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
: ["", "", "", ""].map(() => {
|
||||
return (
|
||||
<Link
|
||||
key={uuidv4()}
|
||||
className="rating-banner-block"
|
||||
to={`/player/${player.id}`}
|
||||
>
|
||||
<div className="rating-banner-img">
|
||||
<img src={hosting + player.img} alt="" />
|
||||
</div>
|
||||
<div className="rating-banner-text">
|
||||
<h4>{player.name}</h4>
|
||||
<h5>{player.average}</h5>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="player-skeleton" key={uuidv4()}>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={breakpoints["800"] ? "25rem" : "43.8rem"}
|
||||
width={"100%"}
|
||||
style={{
|
||||
marginBottom: breakpoints["600"]
|
||||
? "0.8rem"
|
||||
: "2.4rem",
|
||||
}}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.5rem"}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: "14.8rem",
|
||||
justifySelf: "center",
|
||||
}}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.5rem"}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: "4.2rem",
|
||||
justifySelf: "center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
: ["", "", "", ""].map(() => {
|
||||
return (
|
||||
<div className="player-skeleton" key={uuidv4()}>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={breakpoints["800"] ? "25rem" : "43.8rem"}
|
||||
width={"100%"}
|
||||
style={{
|
||||
marginBottom: breakpoints["600"]
|
||||
? "0.8rem"
|
||||
: "2.4rem",
|
||||
}}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.5rem"}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: "14.8rem",
|
||||
justifySelf: "center",
|
||||
}}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"2.5rem"}
|
||||
width={"100%"}
|
||||
style={{
|
||||
maxWidth: "4.2rem",
|
||||
justifySelf: "center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
})}
|
||||
</div>
|
||||
<SearchTable />
|
||||
</div>
|
||||
<SearchTable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Components
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
import PersonInfo from "../components/structure/PersonInfo";
|
||||
import SectionTitle from "../components/global/SectionTitle";
|
||||
|
||||
|
|
@ -46,83 +48,85 @@ const Structure = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<main className="structure">
|
||||
<div className="container">
|
||||
<div className="structure-inner">
|
||||
<SectionTitle title={"Структура федерации"} />
|
||||
{structureData[0].id !== -1 ? (
|
||||
<div className="structure-content">
|
||||
{structureData.map((person: structureType) => {
|
||||
return (
|
||||
<PersonInfo
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="structure">
|
||||
<div className="container">
|
||||
<div className="structure-inner">
|
||||
<SectionTitle title={"Структура федерации"} />
|
||||
{structureData[0].id !== -1 ? (
|
||||
<div className="structure-content">
|
||||
{structureData.map((person: structureType) => {
|
||||
return (
|
||||
<PersonInfo
|
||||
key={uuidv4()}
|
||||
img={hosting + person.img}
|
||||
email={person.email}
|
||||
name={person.name}
|
||||
position={person.job}
|
||||
tel={person.phone}
|
||||
facebook={person.facebook}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="skeleton-structure">
|
||||
{["", "", "", "", "", ""].map(() => (
|
||||
<div
|
||||
className="person"
|
||||
key={uuidv4()}
|
||||
img={hosting + person.img}
|
||||
email={person.email}
|
||||
name={person.name}
|
||||
position={person.job}
|
||||
tel={person.phone}
|
||||
facebook={person.facebook}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="skeleton-structure">
|
||||
{["", "", "", "", "", ""].map(() => (
|
||||
<div
|
||||
className="person"
|
||||
key={uuidv4()}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<div
|
||||
className="person-left"
|
||||
style={{ width: "100%", maxWidth: "20rem" }}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<Skeleton
|
||||
height={"25rem"}
|
||||
width={"100%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="person-right"
|
||||
style={{ width: "100%", maxWidth: "60%" }}
|
||||
>
|
||||
<Skeleton
|
||||
height={"3.3rem"}
|
||||
width={"70%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"3.8rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<div className="person-right-bottom">
|
||||
<div
|
||||
className="person-left"
|
||||
style={{ width: "100%", maxWidth: "20rem" }}
|
||||
>
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
height={"25rem"}
|
||||
width={"100%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="person-right"
|
||||
style={{ width: "100%", maxWidth: "60%" }}
|
||||
>
|
||||
<Skeleton
|
||||
height={"3.3rem"}
|
||||
width={"70%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"3.8rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<div className="person-right-bottom">
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
// Helpers
|
||||
import { getEvents } from "../helpers/apiRequests";
|
||||
|
|
@ -9,6 +10,7 @@ import { dateParser } from "../helpers/dateParser";
|
|||
import { highlightColor } from "../helpers/otherVariables";
|
||||
|
||||
// Components
|
||||
import EmptyState from "../components/global/EmptyState";
|
||||
import SectionTitle from "../components/global/SectionTitle";
|
||||
import Tournament from "../components/tournaments/Tournament";
|
||||
|
||||
|
|
@ -52,94 +54,96 @@ const Tournaments = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<main className="tournaments">
|
||||
<div className="tournaments-banner">
|
||||
<div className="container">
|
||||
<div className="tournaments-title">
|
||||
<SectionTitle title="Турниры" />
|
||||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||||
<main className="tournaments">
|
||||
<div className="tournaments-banner">
|
||||
<div className="container">
|
||||
<div className="tournaments-title">
|
||||
<SectionTitle title="Турниры" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="tournaments-banner-inner">
|
||||
{tournaments[0].id !== -1 ? (
|
||||
tournaments.map((tournament: tournamentType) => {
|
||||
if (tournament.current === 1) {
|
||||
return (
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className="tournaments-head"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.9) 0.01%, rgba(0, 0, 0, 0.4) 100%), url(${match}), no-repeat`,
|
||||
}}
|
||||
>
|
||||
<span>{`${dateParser(
|
||||
tournament.events[0].start.split(" ")[0]
|
||||
)} - ${dateParser(
|
||||
tournament.events[0].end.split(" ")[0]
|
||||
)}`}</span>
|
||||
<h2>{tournament.events[0].name}</h2>
|
||||
<span>{tournament.events[0].place}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
height={"36.2rem"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="tournaments-inner">
|
||||
<div className="tournaments-wrapper">
|
||||
<div className="tournaments-lower">
|
||||
{tournaments[0].id !== -1
|
||||
? tournaments.map((tournament: tournamentType) => {
|
||||
if (tournament.current !== 1) {
|
||||
return (
|
||||
<Tournament
|
||||
key={uuidv4()}
|
||||
img={match}
|
||||
name={tournament.events[0].name}
|
||||
start={dateParser(
|
||||
tournament.events[0].start.split(" ")[0]
|
||||
)}
|
||||
end={dateParser(
|
||||
tournament.events[0].end.split(" ")[0]
|
||||
)}
|
||||
place={tournament.events[0].place}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
: ["", "", "", "", "", ""].map(() => {
|
||||
<div className="container">
|
||||
<div className="tournaments-banner-inner">
|
||||
{tournaments[0].id !== -1 ? (
|
||||
tournaments.map((tournament: tournamentType) => {
|
||||
if (tournament.current === 1) {
|
||||
return (
|
||||
<div key={uuidv4()}>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
height={"26rem"}
|
||||
style={{ marginBottom: "3.2rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
height={"2.5rem"}
|
||||
/>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className="tournaments-head"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.9) 0.01%, rgba(0, 0, 0, 0.4) 100%), url(${match}), no-repeat`,
|
||||
}}
|
||||
>
|
||||
<span>{`${dateParser(
|
||||
tournament.events[0].start.split(" ")[0]
|
||||
)} - ${dateParser(
|
||||
tournament.events[0].end.split(" ")[0]
|
||||
)}`}</span>
|
||||
<h2>{tournament.events[0].name}</h2>
|
||||
<span>{tournament.events[0].place}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
}
|
||||
return null;
|
||||
})
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
height={"36.2rem"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div className="container">
|
||||
<div className="tournaments-inner">
|
||||
<div className="tournaments-wrapper">
|
||||
<div className="tournaments-lower">
|
||||
{tournaments[0].id !== -1
|
||||
? tournaments.map((tournament: tournamentType) => {
|
||||
if (tournament.current !== 1) {
|
||||
return (
|
||||
<Tournament
|
||||
key={uuidv4()}
|
||||
img={match}
|
||||
name={tournament.events[0].name}
|
||||
start={dateParser(
|
||||
tournament.events[0].start.split(" ")[0]
|
||||
)}
|
||||
end={dateParser(
|
||||
tournament.events[0].end.split(" ")[0]
|
||||
)}
|
||||
place={tournament.events[0].place}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
: ["", "", "", "", "", ""].map(() => {
|
||||
return (
|
||||
<div key={uuidv4()}>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
height={"26rem"}
|
||||
style={{ marginBottom: "3.2rem" }}
|
||||
/>
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
height={"2.5rem"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,14 @@
|
|||
flex-direction: column;
|
||||
gap: 2.4rem;
|
||||
align-items: center;
|
||||
transform: translateY(0rem);
|
||||
@include transition-std;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2rem);
|
||||
@include transition-std;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-square {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
.empty-state {
|
||||
padding: 4rem 0;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
@include flex-c;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
&.page {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 30rem;
|
||||
max-width: 40rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,3 +65,55 @@
|
|||
flex-direction: column;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
// Adaptive
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.eventitem-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.latest {
|
||||
position: static;
|
||||
max-width: unset;
|
||||
|
||||
.event {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.event-img {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.latest-content {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.eventitem-top {
|
||||
gap: 0.8rem;
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.eventitem-inner {
|
||||
padding: 4rem 0 8rem 0;
|
||||
}
|
||||
|
||||
.eventitem-content {
|
||||
gap: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.latest-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.eventitem-bottom {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,3 +53,11 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// Adaptive
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.event-date {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,3 +21,4 @@
|
|||
@import "./player-profile";
|
||||
@import "./loader";
|
||||
@import "./map";
|
||||
@import "./empty-state";
|
||||
|
|
|
|||
Loading…
Reference in New Issue