update score

src/components/icons/BeatSaverLogo.tsx

@@ -0,0 +1,30 @@
+type BeatSaverLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function BeatSaverLogo({
+  size = 32,
+  className,
+}: BeatSaverLogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 200 200"
+      version="1.1"
+      className={className}
+    >
+      <g fill="none" stroke="#000000" stroke-width="10">
+        <path d="M 100,7 189,47 100,87 12,47 Z" stroke-linejoin="round"></path>
+        <path
+          d="M 189,47 189,155 100,196 12,155 12,47"
+          stroke-linejoin="round"
+        ></path>
+        <path d="M 100,87 100,196" stroke-linejoin="round"></path>
+        <path d="M 26,77 85,106 53,130 Z" stroke-linejoin="round"></path>
+      </g>
+    </svg>
+  );
+}

src/components/player/Score.tsx

@@ -31,7 +31,8 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
   const diffColor = songDifficultyToColor(diffName);
 
   return (
-    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1.2fr_6fr_3fr] xl:grid-cols-[1fr_6fr_3fr]">
+    // <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1fr_6fr_0.4fr_1.3fr]">
+    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[0.8fr_6fr_1.3fr]">
       <div className="ml-3 flex flex-col items-start justify-center">
         <div className="hidden w-fit flex-row items-center justify-start gap-1 md:flex">
           <GlobeAsiaAustraliaIcon width={20} height={20} />
@@ -56,32 +57,40 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
             loading="lazy"
           />
           <div
-            className="absolute mt-12 cursor-default divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90"
+            className="absolute mt-12 flex w-[55px] cursor-default items-center justify-center divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90"
             style={{
               backgroundColor: diffColor,
             }}
           >
-            <p className="text-white" title={diffName}>
+            {leaderboard.ranked ? (
-              {leaderboard.ranked ? (
+              <div className="flex items-center justify-center gap-[2px]">
-                <div className="flex items-center justify-center gap-[2px]">
+                <StarIcon width={13} height={13} />
-                  <StarIcon width={13} height={13} />
+                {leaderboard.stars.toFixed(2)}
-                  {leaderboard.stars.toFixed(2)}
+              </div>
-                </div>
+            ) : (
-              ) : (
+              <p>{diffName}</p>
-                diffName
+            )}
-              )}
-            </p>
           </div>
         </div>
         {/* Song Info */}
         <div className="w-fit truncate text-blue-500">
-          <p>{leaderboard.songName}</p>
+          <p className="font-bold">{leaderboard.songName}</p>
           <p className="text-blue-300">
             {leaderboard.songAuthorName}{" "}
             <span className="text-gray-200">{leaderboard.levelAuthorName}</span>
           </p>
         </div>
       </div>
+
+      {/* Score Buttons */}
+      {/* <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
+        <button className="rounded-md bg-gray-500">
+          <Link href={`https://beatsaver.com/maps/${leaderboard.songHash}`}>
+            <BeatSaverLogo size={24} className="p-[2.5px]" />
+          </Link>
+        </button>
+      </div> */}
+
       <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
         <div className="flex flex-col md:hidden">
           {/* Score rank */}