diff --git a/src/components/about_us/TeamSlider.tsx b/src/components/about_us/TeamSlider.tsx new file mode 100644 index 0000000..c917a66 --- /dev/null +++ b/src/components/about_us/TeamSlider.tsx @@ -0,0 +1,81 @@ +// Modules +import React, { useState, useEffect } from "react"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { Navigation, Autoplay } from "swiper"; +import { v4 as uuidv4 } from "uuid"; + +// Helpers +import { getTeam } from "../../helpers/apiRequests"; +import { hosting } from "../../links"; +import { highlightColor } from "../../helpers/otherVariables"; + +// Icons +import arrowPrev from "../../icons/arrow-left-green.svg"; +import arrowNext from "../../icons/arrow-right-green.svg"; +import Skeleton from "react-loading-skeleton"; + +const TeamSlider = () => { + const [team, setTeam]: [any, React.Dispatch] = useState(); + + useEffect(() => { + getTeam(setTeam); + }, []); + + return ( +
+ + {team + ? team.map((el: any) => { + if (el.national) { + return ( + +
+
+ +
+

{el.name}

+
+
+ ); + } + }) + : ["", "", "", "", "", ""].map(() => { + return ( + +
+ + +
+
+ ); + })} +
+
+ +
+
+ +
+
+ ); +}; + +export default TeamSlider; diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts index 2bafd86..800fc2d 100644 --- a/src/helpers/apiRequests.ts +++ b/src/helpers/apiRequests.ts @@ -15,6 +15,7 @@ import { structure, contacts, about, + players, } from "../links"; import React from "react"; @@ -122,3 +123,12 @@ export const getAbout = (setState: any) => { }) .catch(); }; + +export const getTeam = (setState: any) => { + axios + .get(players) + .then((res) => { + setState(res.data.data); + }) + .catch(); +}; diff --git a/src/links.ts b/src/links.ts index d898153..22deeb9 100644 --- a/src/links.ts +++ b/src/links.ts @@ -1,4 +1,4 @@ -export const hosting: string = "http://tkf.com.tm:8080"; +export const hosting: string = "http://tkf.com.tm/app"; export const sliderDataUrl: string = hosting + "/api/v1/sliders"; export const partners: string = hosting + "/api/v1/partners"; export const postsMain: string = @@ -19,3 +19,5 @@ export const structure: string = hosting + "/api/v1/structure"; export const contacts: string = hosting + "/api/v1/contact-info"; export const about: string = hosting + "/api/v1/about"; + +export const players: string = hosting + "/api/v1/players"; diff --git a/src/pages/AboutUs.tsx b/src/pages/AboutUs.tsx index ef737e9..3fa3dce 100644 --- a/src/pages/AboutUs.tsx +++ b/src/pages/AboutUs.tsx @@ -3,21 +3,26 @@ import React, { useState, useEffect } from "react"; import Skeleton from "react-loading-skeleton"; // Helpers -import { getAbout } from "../helpers/apiRequests"; +import { getAbout, getVideos } from "../helpers/apiRequests"; import { highlightColor } from "../helpers/otherVariables"; import { hosting } from "../links"; // Components 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"; const AboutUs = () => { const [about, setAbout]: [any, React.Dispatch] = useState(); + const [video, setVideo]: [any, React.Dispatch] = useState(); useEffect(() => { window.scrollTo(0, 0); }, []); useEffect(() => { getAbout(setAbout); + getVideos(setVideo); }, []); return ( @@ -142,6 +147,17 @@ const AboutUs = () => { )} +
+ +
+
+ + {video ? ( + + ) : ( + + )} +
diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss index 252b71c..dec3bc6 100644 --- a/src/styles/_about-us.scss +++ b/src/styles/_about-us.scss @@ -82,3 +82,45 @@ font-size: 1.8rem; max-width: 20rem; } + +.about-us-video { + display: flex; + flex-direction: column; + gap: 4.8rem; +} + +.team { + position: relative; +} + +.team-skeleton { + display: flex; + flex-direction: column; + gap: 1.6rem; + text-align: center; +} + +.team-slide { + display: flex; + flex-direction: column; + gap: 1.6rem; + text-align: center; + + .team-img { + max-width: 30rem; + max-height: 35rem; + width: 100%; + height: 100%; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + + h4 { + font-size: 1.8rem; + } +} diff --git a/src/styles/_video-player.scss b/src/styles/_video-player.scss index a0a24e1..0e7be5a 100644 --- a/src/styles/_video-player.scss +++ b/src/styles/_video-player.scss @@ -1,6 +1,7 @@ .player { width: 100%; min-height: 51.2rem; + height: 100%; img { pointer-events: none; @@ -18,6 +19,7 @@ position: relative; background: #000000a6; width: 100%; + min-height: 51.2rem; height: 100%; img {