Merge pull request #140 from osu-tournament-rating/feature/127

osu-tournament-rating · Mar 23, 2024 · c9bc45c · c9bc45c
2 parents fc99d5e + ce3d07e
commit c9bc45c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/components/Profile/UserMainCard/UserMainCard.module.css b/components/Profile/UserMainCard/UserMainCard.module.css
@@ -65,3 +65,12 @@
 .item .value {
   font-weight: 600;
 }
+
+.item .image {
+  position: relative;
+  display: flex;
+  flex-flow: row;
+  height: 1.13em;
+  aspect-ratio: 1;
+  margin: auto;
+}
diff --git a/components/Profile/UserMainCard/UserMainCard.tsx b/components/Profile/UserMainCard/UserMainCard.tsx
@@ -1,5 +1,6 @@
 'use client';
 import Image from 'next/image';
+import { Tooltip } from 'react-tooltip';
 import styles from './UserMainCard.module.css';
 
 export default function UserMainCardProfile({
@@ -56,8 +57,26 @@ export default function UserMainCardProfile({
         </div>
         <div className={styles.item} id="Tier">
           <div className={styles.label}>Tier</div>
-          <div className={styles.value}>
-            {generalStats?.rankProgress.currentTier}
+          <div className={styles.image}>
+            <Tooltip
+              id={`tooltip-${generalStats?.rankProgress.currentTier}`}
+              style={{
+                borderRadius: '0.6em',
+                fontWeight: '500',
+                fontSize: '0.7em',
+                background: 'hsl(0,0%,82%)',
+                color: '#333',
+              }}
+              place={'right'}
+            />
+            <Image
+              src={`/icons/ranks/${generalStats?.rankProgress.currentTier}.svg`}
+              alt={generalStats?.rankProgress.currentTier}
+              data-tooltip-id={`tooltip-${generalStats?.rankProgress.currentTier}`}
+              data-tooltip-content={generalStats?.rankProgress.currentTier}
+              data-tooltip-delay-show={400}
+              fill
+            />
           </div>
         </div>
       </div>