player info page started
This commit is contained in:
VividTruthKeeper
parent
694ed430fd
commit
15d71cb6ff
|
|
@ -25,6 +25,7 @@ import Structure from "./pages/Structure";
|
|||
import Contacts from "./pages/Contact";
|
||||
import AboutUs from "./pages/AboutUs";
|
||||
import Tournaments from "./pages/Tournaments";
|
||||
import PlayerProfile from "./pages/PlayerProfile";
|
||||
|
||||
const App = () => {
|
||||
// Types
|
||||
|
|
@ -68,6 +69,7 @@ const App = () => {
|
|||
<Route path="/contact" element={<Contacts />} />
|
||||
<Route path="/about-us" element={<AboutUs />} />
|
||||
<Route path="/tournaments" element={<Tournaments />} />
|
||||
<Route path="/player/:playerId" element={<PlayerProfile />} />
|
||||
</Routes>
|
||||
</div>
|
||||
<Footer
|
||||
|
|
|
|||
|
|
@ -142,3 +142,12 @@ export const getEvents = (setState: any) => {
|
|||
})
|
||||
.catch();
|
||||
};
|
||||
|
||||
export const getPlayerInfo = (setState: any, link: string) => {
|
||||
axios
|
||||
.get(link)
|
||||
.then((res) => {
|
||||
setState(res.data.data);
|
||||
})
|
||||
.catch();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
// Modules
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
// Helpers
|
||||
import { getPlayerInfo } from "../helpers/apiRequests";
|
||||
|
||||
// Links
|
||||
import { hosting } from "../links";
|
||||
import { players } from "../links";
|
||||
import Rating from "./Rating";
|
||||
|
||||
const PlayerProfile = () => {
|
||||
const [playerInfo, setPlayerInfo]: [any, React.Dispatch<any>] = useState();
|
||||
const { playerId } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
getPlayerInfo(setPlayerInfo, `${players}/${playerId}`);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="pp">
|
||||
<div className="container">
|
||||
<div className="pp-inner">
|
||||
<div className="pp-left">
|
||||
{playerInfo ? (
|
||||
<div>
|
||||
<img src={hosting + playerInfo[0].img} alt="" />
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<div className="pp-right">
|
||||
<div className="pp-right-top">
|
||||
{playerInfo ? <h3>{playerInfo[0].name}</h3> : ""}
|
||||
<div className="pp-right-top-content">
|
||||
<ul>
|
||||
{playerInfo ? (
|
||||
<li>
|
||||
<span>ID</span>
|
||||
<p>{playerInfo[0].id}</p>
|
||||
</li>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{playerInfo ? (
|
||||
<li>
|
||||
<span>Звание</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].title} */}
|
||||
Гроссмейстер
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{playerInfo ? (
|
||||
<li>
|
||||
<span>Год рождения</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].date_of_birth} */}
|
||||
1990
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pp-right-bottom">
|
||||
<h3>Rating</h3>
|
||||
<div className="pp-right-bottom-content">
|
||||
<ul>
|
||||
{playerInfo ? (
|
||||
<li>
|
||||
<span>Classic</span>
|
||||
<p>{playerInfo[0].average}</p>
|
||||
</li>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{playerInfo ? (
|
||||
<li>
|
||||
<span>Rapid</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].rapid} */}
|
||||
2847
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{playerInfo ? (
|
||||
<li>
|
||||
<span>Blitz</span>
|
||||
<p>
|
||||
{/* {playerInfo[0].blitz} */}
|
||||
2847
|
||||
</p>
|
||||
</li>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlayerProfile;
|
||||
|
||||
// 0:
|
||||
// average: 2864
|
||||
// id: 1
|
||||
// img: "/players/image 12.png"
|
||||
// name: "Carlsen, Magnus"
|
||||
// national: 0
|
||||
// note: ""
|
||||
// [[Prototype]]: Object
|
||||
// length: 1
|
||||
// [[Prototype]]: Array(0)
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
.pp {
|
||||
padding: 8rem 0;
|
||||
}
|
||||
|
||||
.pp-inner {
|
||||
padding: 4.8rem;
|
||||
box-shadow: 0px 0px 15px 0px #00000040;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.7fr;
|
||||
gap: 8rem;
|
||||
}
|
||||
|
||||
.pp-left {
|
||||
div {
|
||||
max-width: 35rem;
|
||||
max-height: 43.8rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pp-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4.8rem;
|
||||
}
|
||||
|
||||
.pp-right-top,
|
||||
.pp-right-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.4rem;
|
||||
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 3rem;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
padding: 1.35rem;
|
||||
display: block;
|
||||
background: $base-green;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.8rem;
|
||||
padding: 1.35rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pp-right-top {
|
||||
h3 {
|
||||
color: $base-green;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,3 +18,4 @@
|
|||
@import "./about-us";
|
||||
@import "./tournaments";
|
||||
@import "./burger";
|
||||
@import "./player-profile";
|
||||
|
|
|
|||
Loading…
Reference in New Issue