fork from scoresaber-reloaded

src/components/Player/ProfileCards/MiniRanking.svelte

@@ -0,0 +1,43 @@
+<script>
+  import {opt} from '../../../utils/js'
+  import MiniRanking from '../../Ranking/Mini.svelte'
+
+  export let playerInfo = null;
+
+</script>
+
+<div class="mini-ranking">
+  <div>
+    <MiniRanking rank={opt(playerInfo, 'rank')} numOfPlayers={5} on:height-changed />
+  </div>
+
+  {#each opt(playerInfo, 'countries', []) as countryInfo (countryInfo.country)}
+    <div>
+      <MiniRanking rank={countryInfo.rank} country={countryInfo.country} numOfPlayers={5} on:height-changed />
+    </div>
+  {/each}
+</div>
+
+<style>
+    .mini-ranking {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 1rem;
+    }
+
+    .mini-ranking :global(section) {
+        padding-left: 0!important;
+        padding-right: 0!important;
+    }
+
+    .mini-ranking :global(section > h3) {
+        padding-left: 0!important;
+        padding-right: 0!important;
+    }
+
+    @media (max-width: 1023px) {
+        .mini-ranking {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>