From c1f33578d772b5d4335c157d211fa678485cd43f Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Mon, 28 Oct 2024 16:33:21 +0000
Subject: [PATCH] fix vs for mobile

---
 .../src/components/score/score-rank-info.tsx  | 13 +++----
 .../components/score/score-time-set-vs.tsx    | 37 +++++++++++++++++++
 2 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 projects/website/src/components/score/score-time-set-vs.tsx

diff --git a/projects/website/src/components/score/score-rank-info.tsx b/projects/website/src/components/score/score-rank-info.tsx
index d40550c..8f2d036 100644
--- a/projects/website/src/components/score/score-rank-info.tsx
+++ b/projects/website/src/components/score/score-rank-info.tsx
@@ -5,7 +5,7 @@ import { getPageFromRank } from "@ssr/common/utils/utils";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { ScoreTimeSet } from "@/components/score/score-time-set";
-import { timeAgo } from "@ssr/common/utils/time-utils";
+import { ScoreTimeSetVs } from "@/components/score/score-time-set-vs";
 
 type Props = {
   score: ScoreSaberScore;
@@ -23,13 +23,10 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
           </p>
         </Link>
       </div>
-      <ScoreTimeSet score={score} />
-      {score.previousScore?.timestamp && (
-        <div className="text-xs text-gray-400 flex flex-row gap-2 items-center">
-          <p>vs</p>
-          <p>{timeAgo(new Date(score.previousScore.timestamp))}</p>
-        </div>
-      )}
+      <div className="flex items-center gap-2 lg:flex-col lg:gap-0">
+        <ScoreTimeSet score={score} />
+        <ScoreTimeSetVs score={score} />
+      </div>
     </div>
   );
 }
diff --git a/projects/website/src/components/score/score-time-set-vs.tsx b/projects/website/src/components/score/score-time-set-vs.tsx
new file mode 100644
index 0000000..4df0889
--- /dev/null
+++ b/projects/website/src/components/score/score-time-set-vs.tsx
@@ -0,0 +1,37 @@
+import { format } from "@formkit/tempo";
+import { timeAgo } from "@ssr/common/utils/time-utils";
+import Tooltip from "@/components/tooltip";
+import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
+
+type ScoreTimeSetProps = {
+  /**
+   * The score that was set.
+   */
+  score: ScoreSaberScore;
+};
+
+export function ScoreTimeSetVs({ score }: ScoreTimeSetProps) {
+  if (!score.previousScore) {
+    return undefined;
+  }
+
+  return (
+    <Tooltip
+      display={
+        <p>
+          {format({
+            date: new Date(score.timestamp),
+            format: "DD MMMM YYYY HH:mm a",
+          })}
+        </p>
+      }
+    >
+      <div>
+        <div className="text-xs text-gray-400 flex flex-row gap-2 items-center">
+          <p>vs</p>
+          <p>{timeAgo(new Date(score.previousScore.timestamp))}</p>
+        </div>
+      </div>
+    </Tooltip>
+  );
+}