fix img

src/app/common/time-utils.ts

@@ -8,19 +8,19 @@ export function timeAgo(input: Date | number) {
   const date = input instanceof Date ? input : new Date(input);
   const formatter = new Intl.RelativeTimeFormat("en");
   const ranges: { [key: string]: number } = {
-    years: 3600 * 24 * 365,
-    months: 3600 * 24 * 30,
-    weeks: 3600 * 24 * 7,
-    days: 3600 * 24,
-    hours: 3600,
-    minutes: 60,
-    seconds: 1,
+    year: 3600 * 24 * 365,
+    month: 3600 * 24 * 30,
+    week: 3600 * 24 * 7,
+    day: 3600 * 24,
+    hour: 3600,
+    minute: 60,
+    second: 1,
   };
   const secondsElapsed = (date.getTime() - Date.now()) / 1000;
   for (let key in ranges) {
     if (ranges[key] < Math.abs(secondsElapsed)) {
       const delta = secondsElapsed / ranges[key];
-      return formatter.format(Math.round(delta), key);
+      return formatter.format(Math.round(delta), key as Intl.RelativeTimeFormatUnit);
     }
   }
 }

src/app/components/player/score.tsx

@@ -1,6 +1,7 @@
 import ScoreSaberPlayerScore from "@/app/common/leaderboard/types/scoresaber/scoresaber-player-score";
 import { timeAgo } from "@/app/common/time-utils";
 import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Image from "next/image";
 
 type Props = {
   /**
@@ -22,7 +23,14 @@ export default function Score({ playerScore }: Props) {
         <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
       </div>
       <div className="flex gap-3">
-        <img src={leaderboard.coverImage} className="w-16 h-16 rounded-md" />
+        <Image
+          unoptimized
+          src={leaderboard.coverImage}
+          width={64}
+          height={64}
+          alt="Song Artwork"
+          className="rounded-md"
+        />
         <div className="flex">
           <div className="flex flex-col">
             <p>{leaderboard.songName}</p>