diff --git a/package-lock.json b/package-lock.json index 3f9c1d4..36a9166 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "node-sass": "^7.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-error-boundary": "^3.1.4", "react-loading-skeleton": "^3.1.0", "react-player": "^2.10.1", "react-router-dom": "^6.3.0", @@ -14724,6 +14725,21 @@ "react": "^18.2.0" } }, + "node_modules/react-error-boundary": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "node_modules/react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", @@ -16647,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", @@ -28535,6 +28551,14 @@ "scheduler": "^0.23.0" } }, + "react-error-boundary": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "requires": { + "@babel/runtime": "^7.12.5" + } + }, "react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", @@ -29987,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", diff --git a/package.json b/package.json index 67e01eb..7bc1a3c 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "node-sass": "^7.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-error-boundary": "^3.1.4", "react-loading-skeleton": "^3.1.0", "react-player": "^2.10.1", "react-router-dom": "^6.3.0", diff --git a/src/components/global/EmptyState.tsx b/src/components/global/EmptyState.tsx new file mode 100644 index 0000000..f9ffea3 --- /dev/null +++ b/src/components/global/EmptyState.tsx @@ -0,0 +1,24 @@ +// Icons +import cloud from "../../icons/empty-state.svg"; + +// Types +interface Props { + page?: boolean; +} + +const EmptyState = ({ page }: Props) => { + return ( +
+
+ +
+
+

Ой...

+

{"Что-то пошло не так :("}

+ {page ?

Попробуйте перезагрузить страницу

: ""} +
+
+ ); +}; + +export default EmptyState; diff --git a/src/components/global/VideoPlayer.tsx b/src/components/global/VideoPlayer.tsx index 37b1ada..5145769 100644 --- a/src/components/global/VideoPlayer.tsx +++ b/src/components/global/VideoPlayer.tsx @@ -15,7 +15,6 @@ const VideoPlayer = ({ videoUrl }: Props) => {
0 ? : undefined} volume={1} diff --git a/src/components/main/CalendarSection.tsx b/src/components/main/CalendarSection.tsx index 07cd095..7db855a 100644 --- a/src/components/main/CalendarSection.tsx +++ b/src/components/main/CalendarSection.tsx @@ -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 = () => {
{video.length > 1 ? ( - + }> + + ) : ( {
- + }> + +
diff --git a/src/components/main/PlayerRatingSection.tsx b/src/components/main/PlayerRatingSection.tsx index 266369f..dbc8cc5 100644 --- a/src/components/main/PlayerRatingSection.tsx +++ b/src/components/main/PlayerRatingSection.tsx @@ -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 = () => {
- + }> + +
diff --git a/src/components/player_profile/Wrapper.tsx b/src/components/player_profile/Wrapper.tsx deleted file mode 100644 index 9e93773..0000000 --- a/src/components/player_profile/Wrapper.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React, { PropsWithChildren } from "react"; - -interface Props { - givenClass: string; - children: PropsWithChildren; -} - -const Wrapper = ({ givenClass, children }: Props) => { - return

{children}

; -}; - -export default Wrapper; diff --git a/src/helpers/onError.ts b/src/helpers/onError.ts new file mode 100644 index 0000000..211558c --- /dev/null +++ b/src/helpers/onError.ts @@ -0,0 +1,3 @@ +export const onError = (message: string) => { + throw new Error(message); +}; diff --git a/src/icons/empty-state.svg b/src/icons/empty-state.svg new file mode 100644 index 0000000..d326328 --- /dev/null +++ b/src/icons/empty-state.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/images/body-bg.jpg b/src/images/body-bg.jpg index 0307bbb..59c93c5 100644 Binary files a/src/images/body-bg.jpg and b/src/images/body-bg.jpg differ diff --git a/src/pages/AboutUs.tsx b/src/pages/AboutUs.tsx index 9a49bad..53c47fe 100644 --- a/src/pages/AboutUs.tsx +++ b/src/pages/AboutUs.tsx @@ -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 ( -
-
-
-
-
- {about.id !== -1 ? ( -

{about.header}

- ) : ( - - )} + }> +
+
+
+
+
+ {about.id !== -1 ? ( +

{about.header}

+ ) : ( + + )} - {about.id !== -1 ? ( -

{about.txt}

- ) : ( - - )} + {about.id !== -1 ? ( +

{about.txt}

+ ) : ( + + )} +
+
+ {about.id !== -1 ? ( +
+ +
+ ) : ( + + )} +
-
+
{about.id !== -1 ? ( -
- + + + +
) : ( - +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ )} +
+
+ + }> + + +
+
+ + {video[0].id !== -1 ? ( + }> + + + ) : ( + )}
-
-
- {about.id !== -1 ? ( -
- - - - -
- ) : ( -
-
- - -
-
- - -
-
- - -
-
- - -
-
- )} -
-
- - -
-
- - {video[0].id !== -1 ? ( - - ) : ( - - )}
-
-
+
+ ); }; diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index 1bd1e74..d7b6a61 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -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 ( -
-
- -
-
-
- - + }> +
+
+
-
-
+
+
+ }> + + + }> + + +
+
+ + ); }; diff --git a/src/pages/EventItem.tsx b/src/pages/EventItem.tsx index 0a68ce6..bde61ce 100644 --- a/src/pages/EventItem.tsx +++ b/src/pages/EventItem.tsx @@ -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 ( -
-
-
-
- {eventData.id !== -1 && !loader ? ( -
- -

{eventData.title}

-
- ) : ( -
- - - - }> +
+
+
+
+ {eventData.id !== -1 && !loader ? ( +
+ +

{eventData.title}

+
+ ) : ( +
-
- )} - {eventData.id !== -1 && !loader ? ( -
-
- + > + + + +
-
-
- ) : ( - "" - )} + )} + {eventData.id !== -1 && !loader ? ( +
+
+ +
+
+
+ ) : ( + "" + )} +
+ }> + +
-
-
-
+ + ); }; diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx index 6d87fb0..74d88be 100644 --- a/src/pages/Events.tsx +++ b/src/pages/Events.tsx @@ -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 ( -
-
-
- -
- {events.loaded - ? events.data.map((evnt) => { - return ( - }> +
+
+
+ +
+ {events.loaded + ? events.data.map((evnt) => { + return ( + + ); + }) + : [ + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + ].map(() => ( +
- ); - }) - : [ - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - ].map(() => ( -
- - - -
- ))} -
-
-
-
- {events.data[0].id !== -1 ? ( - - ) : ( - - )} + style={{ + display: "flex", + flexDirection: "column", + gap: "1rem", + }} + > + + + +
+ ))} +
+
+
+
+ {events.data[0].id !== -1 ? ( + + ) : ( + + )} - - {events.meta.current_page > -1 ? ( - events.meta.current_page + + {events.meta.current_page > -1 ? ( + events.meta.current_page + ) : ( + + )} + + {events.data[0].id !== -1 ? ( + ) : ( - + )} - - {events.data[0].id !== -1 ? ( - - ) : ( - - )} -
-
- - {events.meta.total > -1 ? ( - `Всего ${events.meta.total - 1} ${ - events.meta.total - 1 === 1 - ? "страница" - : events.meta.total - 1 < 5 - ? "страницы" - : "страниц" - }` - ) : ( - - )} - +
+
+ + {events.meta.total > -1 ? ( + `Всего ${events.meta.total - 1} ${ + events.meta.total - 1 === 1 + ? "страница" + : events.meta.total - 1 < 5 + ? "страницы" + : "страниц" + }` + ) : ( + + )} + +
-
-
+
+ ); }; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 2d391f5..2d5ae4c 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -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 ( -
- - - - - -
+ }> +
+ }> + + + }> + + + }> + + + + {/* Not wrapping PlayerRating since it is not a component that may break */} + + {/* Not wrapping PlayerRating since it is not a component that may break */} + + }> + + +
+ ); }; diff --git a/src/pages/PlayerProfile.tsx b/src/pages/PlayerProfile.tsx index 07d5e2a..70c0c61 100644 --- a/src/pages/PlayerProfile.tsx +++ b/src/pages/PlayerProfile.tsx @@ -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 ( -
-
-
-
- {playerInfo.id !== -1 ? ( -
- -
- ) : ( - - )} -
-
-
+ }> +
+
+
+
{playerInfo.id !== -1 ? ( -

{playerInfo.name}

+
+ +
) : ( )} -
-
    - {playerInfo.id !== -1 ? ( -
  • - ID -

    {playerInfo.id}

    -
    • - ) : ( -
  • - - -
    • - )} - {playerInfo.id !== -1 ? ( -
  • - Звание -

    - {/* {playerInfo[0].title} */} - Гроссмейстер -

    -
    • - ) : ( -
  • - - -
    • - )} - {playerInfo.id !== -1 ? ( -
  • - Год рождения -

    - {/* {playerInfo[0].date_of_birth} */} - 1990 -

    -
    • - ) : ( -
  • - - -
    • - )} -
-
-
-

+
+
{playerInfo.id !== -1 ? ( - "Rating" +

{playerInfo.name}

) : ( { height={"3.8rem"} /> )} -

-
-
    +
    +
      + {playerInfo.id !== -1 ? ( +
    • + ID +

      {playerInfo.id}

      +
      • + ) : ( +
    • + + +
      • + )} + {playerInfo.id !== -1 ? ( +
    • + Звание +

      + {/* {playerInfo[0].title} */} + Гроссмейстер +

      +
      • + ) : ( +
    • + + +
      • + )} + {playerInfo.id !== -1 ? ( +
    • + Год рождения +

      + {/* {playerInfo[0].date_of_birth} */} + 1990 +

      +
      • + ) : ( +
    • + + +
      • + )} +
    +
    +
+
+

{playerInfo.id !== -1 ? ( -
  • - Classic -

    {playerInfo.average}

    -
    • + "Rating" ) : ( -
  • - - -
    • + )} - {playerInfo.id !== -1 ? ( -
  • - Rapid -

    - {/* {playerInfo[0].rapid} */} - 2847 -

    -
    • - ) : ( -
  • - - -
    • - )} - {playerInfo.id !== -1 ? ( -
  • - Blitz -

    - {/* {playerInfo[0].blitz} */} - 2847 -

    -
    • - ) : ( -
  • - - -
    • - )} - +

    +
    +
      + {playerInfo.id !== -1 ? ( +
    • + Classic +

      {playerInfo.average}

      +
      • + ) : ( +
    • + + +
      • + )} + {playerInfo.id !== -1 ? ( +
    • + Rapid +

      + {/* {playerInfo[0].rapid} */} + 2847 +

      +
      • + ) : ( +
    • + + +
      • + )} + {playerInfo.id !== -1 ? ( +
    • + Blitz +

      + {/* {playerInfo[0].blitz} */} + 2847 +

      +
      • + ) : ( +
    • + + +
      • + )} +
    +
    -
    -
    + + ); }; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index f8b2b0c..16b6c5d 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -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 ( -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -

    Carlsen, Magnus

    -
    -
    - ID -

    1503014

    -
    -
    - ID -

    1503014

    -
    -
    - ID -

    1503014

    -
    + }> +
    +
    +
    +
    +
    +
    +
    -
    -

    Rating

    -
    -
    - ID -

    1503014

    +
    +
    +

    Carlsen, Magnus

    +
    +
    + ID +

    1503014

    +
    +
    + ID +

    1503014

    +
    +
    + ID +

    1503014

    +
    -
    - ID -

    1503014

    -
    -
    - ID -

    1503014

    +
    +
    +

    Rating

    +
    +
    + ID +

    1503014

    +
    +
    + ID +

    1503014

    +
    +
    + ID +

    1503014

    +
    -
    -
    +
    + ); }; diff --git a/src/pages/Rating.tsx b/src/pages/Rating.tsx index 0eb1711..62e9fd5 100644 --- a/src/pages/Rating.tsx +++ b/src/pages/Rating.tsx @@ -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 ( -
    -
    -
    - -
    -
    - {players[0].id !== -1 - ? players.map((player: Player) => { - if (player.national === 0) { + }> +
    +
    +
    + +
    +
    + {players[0].id !== -1 + ? players.map((player: Player) => { + if (player.national === 0) { + return ( + +
    + +
    +
    +

    {player.name}

    +
    {player.average}
    +
    + + ); + } + return null; + }) + : ["", "", "", ""].map(() => { return ( - -
    - -
    -
    -

    {player.name}

    -
    {player.average}
    -
    - +
    + + + +
    ); - } - return null; - }) - : ["", "", "", ""].map(() => { - return ( -
    - - - -
    - ); - })} + })} +
    +
    -
    -
    -
    + + ); }; diff --git a/src/pages/Structure.tsx b/src/pages/Structure.tsx index e6f21da..15fc4e8 100644 --- a/src/pages/Structure.tsx +++ b/src/pages/Structure.tsx @@ -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 ( -
    -
    -
    - - {structureData[0].id !== -1 ? ( -
    - {structureData.map((person: structureType) => { - return ( - }> +
    +
    +
    + + {structureData[0].id !== -1 ? ( +
    + {structureData.map((person: structureType) => { + return ( + + ); + })} +
    + ) : ( +
    + {["", "", "", "", "", ""].map(() => ( +
    - ); - })} -
    - ) : ( -
    - {["", "", "", "", "", ""].map(() => ( -
    -
    - -
    -
    - - -
    +
    - -
    +
    + + +
    + + + +
    +
    -
    - ))} -
    - )} + ))} +
    + )} +
    -
    -
    +
    + ); }; diff --git a/src/pages/Tournaments.tsx b/src/pages/Tournaments.tsx index 2fdb4fe..32e3957 100644 --- a/src/pages/Tournaments.tsx +++ b/src/pages/Tournaments.tsx @@ -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 ( -
    -
    -
    -
    - + }> +
    +
    +
    +
    + +
    -
    -
    -
    - {tournaments[0].id !== -1 ? ( - tournaments.map((tournament: tournamentType) => { - if (tournament.current === 1) { - return ( -
    - {`${dateParser( - tournament.events[0].start.split(" ")[0] - )} - ${dateParser( - tournament.events[0].end.split(" ")[0] - )}`} -

    {tournament.events[0].name}

    - {tournament.events[0].place} -
    - ); - } - return null; - }) - ) : ( - - )} -
    -
    -
    -
    -
    -
    -
    - {tournaments[0].id !== -1 - ? tournaments.map((tournament: tournamentType) => { - if (tournament.current !== 1) { - return ( - - ); - } - return null; - }) - : ["", "", "", "", "", ""].map(() => { +
    +
    + {tournaments[0].id !== -1 ? ( + tournaments.map((tournament: tournamentType) => { + if (tournament.current === 1) { return ( -
    - - +
    + {`${dateParser( + tournament.events[0].start.split(" ")[0] + )} - ${dateParser( + tournament.events[0].end.split(" ")[0] + )}`} +

    {tournament.events[0].name}

    + {tournament.events[0].place}
    ); - })} + } + return null; + }) + ) : ( + + )}
    -
    -
    +
    +
    +
    +
    + {tournaments[0].id !== -1 + ? tournaments.map((tournament: tournamentType) => { + if (tournament.current !== 1) { + return ( + + ); + } + return null; + }) + : ["", "", "", "", "", ""].map(() => { + return ( +
    + + +
    + ); + })} +
    +
    +
    +
    + + ); }; diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss index 6e2ed82..fdac7b8 100644 --- a/src/styles/_about-us.scss +++ b/src/styles/_about-us.scss @@ -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 { diff --git a/src/styles/_empty-state.scss b/src/styles/_empty-state.scss new file mode 100644 index 0000000..3117973 --- /dev/null +++ b/src/styles/_empty-state.scss @@ -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; + } +} diff --git a/src/styles/style.scss b/src/styles/style.scss index 52f5324..959b290 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -21,3 +21,4 @@ @import "./player-profile"; @import "./loader"; @import "./map"; +@import "./empty-state";