leaderboard

src/user/leaderboard/index.tsx

@@ -1,10 +1,46 @@
 import react from 'react'
 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 = () => {
     return <div>
         {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>
 }

src/user/leaderboard/style.css

@@ -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;
+}