fix vs for mobile
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m21s
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m21s
This commit is contained in:
parent
0ec1fc9d41
commit
c1f33578d7
@ -5,7 +5,7 @@ import { getPageFromRank } from "@ssr/common/utils/utils";
|
|||||||
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
|
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
|
||||||
import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
|
import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
|
||||||
import { ScoreTimeSet } from "@/components/score/score-time-set";
|
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 = {
|
type Props = {
|
||||||
score: ScoreSaberScore;
|
score: ScoreSaberScore;
|
||||||
@ -23,13 +23,10 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
|
|||||||
</p>
|
</p>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-center gap-2 lg:flex-col lg:gap-0">
|
||||||
<ScoreTimeSet score={score} />
|
<ScoreTimeSet score={score} />
|
||||||
{score.previousScore?.timestamp && (
|
<ScoreTimeSetVs score={score} />
|
||||||
<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>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
37
projects/website/src/components/score/score-time-set-vs.tsx
Normal file
37
projects/website/src/components/score/score-time-set-vs.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Reference in New Issue
Block a user