Tournaments page done
This commit is contained in:
parent
588c826589
commit
cecba10992
|
|
@ -0,0 +1,32 @@
|
|||
// Modules
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// Types
|
||||
interface Props {
|
||||
img: string;
|
||||
name: string;
|
||||
start: string;
|
||||
end: string;
|
||||
place: string;
|
||||
}
|
||||
|
||||
const Tournament = ({ img, name, start, end, place }: Props) => {
|
||||
return (
|
||||
<Link to={"/"} className="tournament">
|
||||
<div className="tournament-top">
|
||||
<div></div>
|
||||
<img src={img} alt="" />
|
||||
</div>
|
||||
<div className="tournament-bottom">
|
||||
<h3>{name}</h3>
|
||||
<p>
|
||||
<span>{`${start} - ${end}`}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{place}</span>
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tournament;
|
||||
|
|
@ -1,27 +1,102 @@
|
|||
// Modules
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
|
||||
// Helpers
|
||||
import { getEvents } from "../helpers/apiRequests";
|
||||
import { dateParser } from "../helpers/dateParser";
|
||||
import { highlightColor } from "../helpers/otherVariables";
|
||||
|
||||
// Components
|
||||
import SectionTitle from "../components/global/SectionTitle";
|
||||
import Tournament from "../components/tournaments/Tournament";
|
||||
|
||||
// Images
|
||||
import match from "../images/match.jpg";
|
||||
|
||||
const Tournaments = () => {
|
||||
const [tournaments, setTournaments]: [any, React.Dispatch<any>] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
getEvents(setTournaments);
|
||||
}, []);
|
||||
return (
|
||||
<main className="tournaments">
|
||||
<div className="container">
|
||||
<div className="tournaments-inner">
|
||||
<SectionTitle title="Турниры" />
|
||||
<div className="tournaments-wrapper">
|
||||
<div
|
||||
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>25 nov - 16 dec</span>
|
||||
<h2>FIDE WORLD CHAMPIONSHIP MATCH</h2>
|
||||
<span>Dubai, UAE, 2021</span>
|
||||
{tournaments ? (
|
||||
tournaments.map((tournament: any) => {
|
||||
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>
|
||||
);
|
||||
}
|
||||
})
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
width={"100%"}
|
||||
height={"36.2rem"}
|
||||
/>
|
||||
)}
|
||||
<div className="tournaments-lower">
|
||||
{tournaments
|
||||
? tournaments.map((tournament: any) => {
|
||||
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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})
|
||||
: ["", "", "", "", "", ""].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>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
|
||||
.tournaments-head {
|
||||
background-position: 60% top !important;
|
||||
background-size: cover !important;
|
||||
padding: 5.6rem 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -37,3 +38,64 @@
|
|||
width: 100%;
|
||||
min-height: 36.2rem;
|
||||
}
|
||||
|
||||
.tournaments-lower {
|
||||
@include grid($row: false, $layout: repeat(3, 1fr));
|
||||
row-gap: 4rem;
|
||||
column-gap: 8.5rem;
|
||||
}
|
||||
|
||||
.tournament-top {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 26rem;
|
||||
|
||||
div {
|
||||
z-index: 3;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.tournament-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
border: 0.1rem solid #cecece;
|
||||
border-top: none;
|
||||
padding: 3.2rem 2.4rem;
|
||||
|
||||
h3 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: bold;
|
||||
color: $base-green;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.5rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: $base-green;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue