From 9438cdcc694c443c8337a33898bf80dfd245daca Mon Sep 17 00:00:00 2001
From: M-Farmaha <115003821+M-Farmaha@users.noreply.github.com>
Date: Tue, 23 Apr 2024 23:35:18 +0300
Subject: [PATCH] add tournament page
---
src/Api/ApiRequest.js | 5 ++
src/Api/members.json | 2 +-
src/Api/tournaments.json | 55 +++++++++++++
src/App.js | 5 ++
src/components/AppBar/AppBar.jsx | 9 +++
src/components/ChartSection/ChartSection.jsx | 2 +-
src/components/Filters/MembersFilterBar.jsx | 2 +-
.../LastUpdateSection/LastUpdateSection.jsx | 2 +-
src/components/Logo/Logo-styled.jsx | 10 +--
src/components/Logo/Logo.jsx | 22 +++--
.../TournamentsList/TournamentsItem.jsx | 21 +++++
.../TournamentsList-styled.jsx | 81 +++++++++++++++++++
.../TournamentsList/TournamentsList.jsx | 21 +++++
src/helpers/getColorByType.js | 2 +-
.../TournamentsPage-styled.jsx | 0
src/pages/TournamentsPage/TournamentsPage.jsx | 23 ++++++
src/sprite.svg | 13 +++
17 files changed, 256 insertions(+), 19 deletions(-)
create mode 100644 src/Api/tournaments.json
create mode 100644 src/components/TournamentsList/TournamentsItem.jsx
create mode 100644 src/components/TournamentsList/TournamentsList-styled.jsx
create mode 100644 src/components/TournamentsList/TournamentsList.jsx
create mode 100644 src/pages/TournamentsPage/TournamentsPage-styled.jsx
create mode 100644 src/pages/TournamentsPage/TournamentsPage.jsx
diff --git a/src/Api/ApiRequest.js b/src/Api/ApiRequest.js
index 672a366..5fcfc63 100644
--- a/src/Api/ApiRequest.js
+++ b/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;
+};
diff --git a/src/Api/members.json b/src/Api/members.json
index 3b4e9aa..cecfc7a 100644
--- a/src/Api/members.json
+++ b/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": "Одноручний",
diff --git a/src/Api/tournaments.json b/src/Api/tournaments.json
new file mode 100644
index 0000000..56766b3
--- /dev/null
+++ b/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 }
+ ]
+ }
+ ]
+ }
+]
diff --git a/src/App.js b/src/App.js
index ec60022..4466588 100644
--- a/src/App.js
+++ b/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() {
}>
} />
+ }>
+ } />
+
+
}>
} />
diff --git a/src/components/AppBar/AppBar.jsx b/src/components/AppBar/AppBar.jsx
index f8cf603..61b8dc3 100644
--- a/src/components/AppBar/AppBar.jsx
+++ b/src/components/AppBar/AppBar.jsx
@@ -43,6 +43,15 @@ export const AppBar = () => {
+
+
+
+
+
+ Турніри
+
+
+
diff --git a/src/components/ChartSection/ChartSection.jsx b/src/components/ChartSection/ChartSection.jsx
index eeaa7a1..d360322 100644
--- a/src/components/ChartSection/ChartSection.jsx
+++ b/src/components/ChartSection/ChartSection.jsx
@@ -5,7 +5,7 @@ import { Section, Subtitle } from "./ChartSection-styled";
export const ChartSection = ({ membersArray }) => {
const optionsByType = [
"Аматор",
- "Чемпіон",
+ "Легенда",
"Напів професіонал",
"Професіонал",
"Тренер",
diff --git a/src/components/Filters/MembersFilterBar.jsx b/src/components/Filters/MembersFilterBar.jsx
index 73401a0..1693b99 100644
--- a/src/components/Filters/MembersFilterBar.jsx
+++ b/src/components/Filters/MembersFilterBar.jsx
@@ -18,7 +18,7 @@ export const MembersFilterBar = ({ membersArray, setVisibleMembersArray }) => {
"Аматор",
"Напів професіонал",
"Професіонал",
- "Чемпіон",
+ "Легенда",
"Тренер",
"Дитяча група",
"Тенісна мама",
diff --git a/src/components/LastUpdateSection/LastUpdateSection.jsx b/src/components/LastUpdateSection/LastUpdateSection.jsx
index 6b085b0..566191c 100644
--- a/src/components/LastUpdateSection/LastUpdateSection.jsx
+++ b/src/components/LastUpdateSection/LastUpdateSection.jsx
@@ -11,7 +11,7 @@ export const LastUpdateSection = () => {
- Останнє оновлення: 11.04.2024
+ Останнє оновлення: 23.04.2024
diff --git a/src/components/Logo/Logo-styled.jsx b/src/components/Logo/Logo-styled.jsx
index c9528cd..2d714e6 100644
--- a/src/components/Logo/Logo-styled.jsx
+++ b/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;
diff --git a/src/components/Logo/Logo.jsx b/src/components/Logo/Logo.jsx
index e915bb6..512d4a1 100644
--- a/src/components/Logo/Logo.jsx
+++ b/src/components/Logo/Logo.jsx
@@ -1,14 +1,14 @@
import sprite from "../../sprite.svg";
-import { LogoSvg, LogoWWrap, LogoWWrapAlt } from "./Logo-styled";
+import { LogoSvg, LogoWrap } from "./Logo-styled";
export const Logo = () => {
return (
<>
-
+
-
+
);
};
@@ -16,11 +16,23 @@ export const Logo = () => {
export const LogoAlt = () => {
return (
<>
-
+
-
+
+
+ );
+};
+
+export const TournamentLogo = ({ path }) => {
+ return (
+ <>
+
+
+
+
+
);
};
diff --git a/src/components/TournamentsList/TournamentsItem.jsx b/src/components/TournamentsList/TournamentsItem.jsx
new file mode 100644
index 0000000..0f87095
--- /dev/null
+++ b/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 (
+ <>
+ -
+
+ {index + 1}.
+
+ {el.name}
+ {el.status}
+
+
+
+ );
+};
diff --git a/src/components/TournamentsList/TournamentsList-styled.jsx b/src/components/TournamentsList/TournamentsList-styled.jsx
new file mode 100644
index 0000000..3885450
--- /dev/null
+++ b/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;
+ }
+ }
+`;
diff --git a/src/components/TournamentsList/TournamentsList.jsx b/src/components/TournamentsList/TournamentsList.jsx
new file mode 100644
index 0000000..6f6c9b4
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+ {tournamentsArray?.map((el, index) => (
+
+ ))}
+
+
+
+ );
+};
diff --git a/src/helpers/getColorByType.js b/src/helpers/getColorByType.js
index 3252c40..57b4dfe 100644
--- a/src/helpers/getColorByType.js
+++ b/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":
diff --git a/src/pages/TournamentsPage/TournamentsPage-styled.jsx b/src/pages/TournamentsPage/TournamentsPage-styled.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/TournamentsPage/TournamentsPage.jsx b/src/pages/TournamentsPage/TournamentsPage.jsx
new file mode 100644
index 0000000..ced972a
--- /dev/null
+++ b/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 (
+ <>
+
+
+ );
+};
+
+export default TournamentsPage;
diff --git a/src/sprite.svg b/src/sprite.svg
index 10ea7e2..651e393 100644
--- a/src/sprite.svg
+++ b/src/sprite.svg
@@ -629,6 +629,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+