add tournament page

src/Api/ApiRequest.js

@@ -1,5 +1,6 @@
 import photos from "./photos.json";
 import members from "./members.json";
+import tournaments from "./tournaments.json"
 
 export const photosApi = () => {
   return photos;
@@ -8,3 +9,7 @@ export const photosApi = () => {
 export const membersApi = () => {
   return members;
 };
+
+export const tournamentsApi = () => {
+  return tournaments;
+};

src/Api/members.json

@@ -500,7 +500,7 @@
     "avatar": "https://raw.githubusercontent.com/M-Farmaha/100-club/main/src/components/MembersList/avatars/39.jpg",
     "sex": "male",
     "hometown": "Львів",
-    "type": "Чемпіон",
+    "type": "Легенда",
     "category": null,
     "forhand": "Зліва",
     "backhand": "Одноручний",

src/Api/tournaments.json

@@ -0,0 +1,55 @@
+[
+  {
+    "id": "2023_1",
+    "year": 2023,
+    "name": "Kosyk's Open 2023",
+    "logo": "logo-KO",
+    "status": "Завершений",
+    "stages": [
+      {
+        "date": "2023-06-25",
+        "players": [
+          { "member_id": "42", "win": 1, "defeat": 1 },
+          { "member_id": "1", "win": 8, "defeat": 3 },
+          { "member_id": "76", "win": 3, "defeat": 6 },
+          { "member_id": "39", "win": 13, "defeat": 1 },
+          { "member_id": "85", "win": 0, "defeat": 6 },
+          { "member_id": "11", "win": 2, "defeat": 6 },
+          { "member_id": "57", "win": 2, "defeat": 6 }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "2024_1",
+    "year": 2024,
+    "name": "Kosyk's Open 2024",
+    "logo": "logo-KO",
+    "status": "Активний",
+    "stages": [
+      {
+        "date": "2024-04-7",
+        "players": [
+          { "member_id": "1", "win": 6, "defeat": 3 },
+          { "member_id": "39", "win": 7, "defeat": 3 },
+          { "member_id": "76", "win": 4, "defeat": 5 },
+          { "member_id": "20", "win": 1, "defeat": 3 },
+          { "member_id": "5", "win": 0, "defeat": 5 },
+          { "member_id": "57", "win": 5, "defeat": 4 }
+        ]
+      },
+      {
+        "date": "2024-04-21",
+        "players": [
+          { "member_id": "1", "win": 13, "defeat": 1 },
+          { "member_id": "39", "win": 10, "defeat": 4 },
+          { "member_id": "76", "win": 1, "defeat": 10 },
+          { "member_id": "20", "win": 0, "defeat": 1 },
+          { "member_id": "11", "win": 8, "defeat": 4 },
+          { "member_id": "5", "win": 0, "defeat": 5 },
+          { "member_id": "31", "win": 0, "defeat": 1 }
+        ]
+      }
+    ]
+  }
+]

src/App.js

@@ -7,6 +7,7 @@ import Layout from "./Layout/Layout";
 
 import { ImageGalleryModal } from "./components/ImageGallery/ImageGalleryModal";
 import { MembersModal } from "./components/MembersList/MembersModal";
+import TournamentsPage from "./pages/TournamentsPage/TournamentsPage";
 
 function App() {
   return (
@@ -16,6 +17,10 @@ function App() {
           <Route path="/" element={<Layout />}>
             <Route index element={<HomePage />} />
 
+            <Route path="tournaments" element={<TournamentsPage />}>
+              <Route path="user/:id" element={<MembersModal />} />
+            </Route>
+
             <Route path="members" element={<MembersPage />}>
               <Route path="user/:id" element={<MembersModal />} />
             </Route>

src/components/AppBar/AppBar.jsx

@@ -43,6 +43,15 @@ export const AppBar = () => {
             </NavLinkStyled>
           </a.div>
           <NavList>
+            <NavItem>
+              <NavLinkStyled to="/tournaments">
+                <NavIconSvg>
+                  <use href={sprite + "#icon-tournament"}></use>
+                </NavIconSvg>
+                Турніри
+              </NavLinkStyled>
+            </NavItem>
+
             <NavItem>
               <NavLinkStyled to="/members">
                 <NavIconSvg>

src/components/ChartSection/ChartSection.jsx

@@ -5,7 +5,7 @@ import { Section, Subtitle } from "./ChartSection-styled";
 export const ChartSection = ({ membersArray }) => {
   const optionsByType = [
     "Аматор",
-    "Чемпіон",
+    "Легенда",
     "Напів професіонал",
     "Професіонал",
     "Тренер",

src/components/Filters/MembersFilterBar.jsx

@@ -18,7 +18,7 @@ export const MembersFilterBar = ({ membersArray, setVisibleMembersArray }) => {
     "Аматор",
     "Напів професіонал",
     "Професіонал",
-    "Чемпіон",
+    "Легенда",
     "Тренер",
     "Дитяча група",
     "Тенісна мама",

src/components/LastUpdateSection/LastUpdateSection.jsx

@@ -11,7 +11,7 @@ export const LastUpdateSection = () => {
               <use href={sprite + "#icon-loop"}></use>
             </IconSvg>
           </IconWrap>
-          Останнє оновлення: 11.04.2024
+          Останнє оновлення: 23.04.2024
         </Text>
       </Section>
     </>

src/components/Logo/Logo-styled.jsx

@@ -1,14 +1,6 @@
 import styled from "styled-components";
 
-export const LogoWWrap = styled.div`
-  width: 80px;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const LogoWWrapAlt = styled.div`
+export const LogoWrap = styled.div`
   width: 80px;
   height: 80px;
   display: flex;

src/components/Logo/Logo.jsx

@@ -1,26 +1,38 @@
 import sprite from "../../sprite.svg";
-import { LogoSvg, LogoWWrap, LogoWWrapAlt } from "./Logo-styled";
+import { LogoSvg, LogoWrap } from "./Logo-styled";
 
 export const Logo = () => {
   return (
     <>
-      <LogoWWrap>
+      <LogoWrap>
         <LogoSvg>
           <use href={sprite + "#logo-full"}></use>
         </LogoSvg>
-      </LogoWWrap>
+      </LogoWrap>
     </>
   );
 };
 
 export const LogoAlt = () => {
   return (
     <>
-      <LogoWWrapAlt>
+      <LogoWrap>
         <LogoSvg>
           <use href={sprite + "#logo-alt"}></use>
         </LogoSvg>
-      </LogoWWrapAlt>
+      </LogoWrap>
+    </>
+  );
+};
+
+export const TournamentLogo = ({ path }) => {
+  return (
+    <>
+      <LogoWrap style={{ width: "60px", height: "60px" }}>
+        <LogoSvg>
+          <use href={sprite + `#${path}`}></use>
+        </LogoSvg>
+      </LogoWrap>
     </>
   );
 };

src/components/TournamentsList/TournamentsItem.jsx

@@ -0,0 +1,21 @@
+import { TournamentLogo } from "../Logo/Logo";
+import {
+  Item,
+  MembersItemText,
+  MembersItemWrap,
+} from "./TournamentsList-styled";
+
+export const TournamentsItem = ({ el, index }) => {
+  return (
+    <>
+      <Item id={el.id}>
+        <MembersItemWrap>
+          <MembersItemText>{index + 1}.</MembersItemText>
+          <TournamentLogo path={el.logo} />
+          <MembersItemText>{el.name}</MembersItemText>
+          <MembersItemText>{el.status}</MembersItemText>
+        </MembersItemWrap>
+      </Item>
+    </>
+  );
+};

src/components/TournamentsList/TournamentsList-styled.jsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+
+export const Section = styled.section`
+  padding-bottom: 50px;
+  min-height: 800px;
+  background-color: var(--secondary-white-color);
+`;
+
+export const List = styled.ul``;
+
+export const Item = styled.li`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100px;
+
+  &:nth-child(odd) {
+    background-color: var(--primary-white-color);
+  }
+
+  &:nth-child(even) {
+    background-color: var(--secondary-white-color);
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  @media screen and (min-width: 1200px) {
+    &:hover {
+      background-color: var(--primary-black-color);
+      color: var(--primary-white-color);
+    }
+  }
+`;
+
+export const MembersItemWrap = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding-left: 24px;
+  padding-right: 24px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
+  width: 100%;
+  height: 100%;
+`;
+
+export const MembersItemText = styled.p`
+  overflow: hidden;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  height: 100%;
+
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.6;
+
+  &:nth-child(1) {
+    width: 35px;
+  }
+
+  &:nth-child(3) {
+    padding-left: 10px;
+    width: 120px;
+    flex-grow: 1;
+  }
+
+  &:nth-child(4) {
+    width: 120px;
+    justify-content: right;
+    text-align: right;
+
+    @media screen and (min-width: 450px) {
+      width: 150px;
+    }
+  }
+`;

src/components/TournamentsList/TournamentsList.jsx

@@ -0,0 +1,21 @@
+import { List, Section } from "./TournamentsList-styled";
+import { TournamentsItem } from "./TournamentsItem";
+import { TitleSection } from "../TitleSection/TitleSection";
+
+export const TournamentsList = ({ tournamentsArray }) => {
+  return (
+    <>
+      <Section>
+        <TitleSection
+          icon={"#icon-tournament"}
+          title={"Кількість турнірів: " + tournamentsArray.length}
+        />
+        <List>
+          {tournamentsArray?.map((el, index) => (
+            <TournamentsItem key={el.id} el={el} index={index} />
+          ))}
+        </List>
+      </Section>
+    </>
+  );
+};

src/helpers/getColorByType.js

@@ -12,7 +12,7 @@ export const getColorByType = (type) => {
       return "var(--type-kid-color)";
     case "Тенісна мама":
       return "var(--type-tennismom-color)";
-    case "Чемпіон":
+    case "Легенда":
       return "var(--type-champion-color)";
 
     case "male":

src/pages/TournamentsPage/TournamentsPage.jsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+import { tournamentsApi } from "../../Api/ApiRequest";
+import { TournamentsList } from "../../components/TournamentsList/TournamentsList";
+
+const TournamentsPage = () => {
+  const [tournamentsArray, setTournamentsArray] = useState([]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    const tournaments = tournamentsApi();
+    tournaments?.sort((a, b) => a.name.localeCompare(b.name));
+    setTournamentsArray(tournaments);
+  }, []);
+
+  return (
+    <>
+      <TournamentsList tournamentsArray={tournamentsArray} />
+    </>
+  );
+};
+
+export default TournamentsPage;