mirror of
https://github.com/more-tech4-magnum-opus/frontend.git
synced 2024-11-10 19:06:33 +03:00
leaderboard
This commit is contained in:
parent
41c81fdca0
commit
75b138e20b
|
@ -1,10 +1,46 @@
|
||||||
import react from 'react'
|
import react from 'react'
|
||||||
import header from '../header'
|
import header from '../header'
|
||||||
|
import './style.css';
|
||||||
|
|
||||||
|
|
||||||
|
interface IClan{
|
||||||
|
place: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClanLeaderboard: react.FC<IClan> = (props) =>{
|
||||||
|
return <div>
|
||||||
|
<div className="clan-leader__content">
|
||||||
|
<img src="/clan-logo.png" alt="" className="clan-image" />
|
||||||
|
<div className="clan-info">
|
||||||
|
<div className="clan-place">
|
||||||
|
Место клана: {props.place} / 45
|
||||||
|
</div>
|
||||||
|
<div className="clan-names">Skull & Bones</div>
|
||||||
|
</div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="score-clan">
|
||||||
|
Score клана:
|
||||||
|
<img src="/Respect.svg" alt="" width={10} />
|
||||||
|
{3600 - 200 * props.place}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export const Leaderboard: react.FC = () => {
|
export const Leaderboard: react.FC = () => {
|
||||||
return <div>
|
return <div>
|
||||||
{header}
|
{header}
|
||||||
|
<div className="centered">
|
||||||
|
<div className="leaderboard-container">
|
||||||
|
<div className="leaderboard-title">
|
||||||
|
Лидерборд кланов
|
||||||
|
</div>
|
||||||
|
<ClanLeaderboard place={1} />
|
||||||
|
<ClanLeaderboard place={2} />
|
||||||
|
<ClanLeaderboard place={3} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
52
src/user/leaderboard/style.css
Normal file
52
src/user/leaderboard/style.css
Normal file
|
@ -0,0 +1,52 @@
|
||||||
|
.centered{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.leaderboard-container{
|
||||||
|
margin-top: 100px;
|
||||||
|
width: 900px;
|
||||||
|
background-color: white;
|
||||||
|
padding: 20px 100px;
|
||||||
|
border-radius: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderboard-title{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clan-leader__content{
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clan-image{
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.clan-place{
|
||||||
|
background-color: #1890FF;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 5px 16px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clan-names{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-clan{
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 150px;
|
||||||
|
border: 1px solid #8637E9;
|
||||||
|
padding: 5px 16px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user