diff --git a/app/components/match-page/MatchBannerStartedAt.tsx b/app/components/match-page/MatchBannerStartedAt.tsx
index 53601cdb1..20347355a 100644
--- a/app/components/match-page/MatchBannerStartedAt.tsx
+++ b/app/components/match-page/MatchBannerStartedAt.tsx
@@ -1,21 +1,43 @@
import { LocaleTime } from "~/components/LocaleTime";
+import { LocaleTimeRange } from "~/components/LocaleTimeRange";
+
+const FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
+ month: "numeric",
+ year: "2-digit",
+ day: "numeric",
+ hour: "numeric",
+ minute: "numeric",
+};
+
+const CLASS_NAME = "text-lighter font-semi-bold";
interface MatchBannerStartedAtProps {
time: Date;
+ /** When given, the time the match ended, shown as a range together with the start time */
+ endTime?: Date | null;
}
-export function MatchBannerStartedAt({ time }: MatchBannerStartedAtProps) {
+export function MatchBannerStartedAt({
+ time,
+ endTime,
+}: MatchBannerStartedAtProps) {
+ if (endTime) {
+ return (
+
+ );
+ }
+
return (
);
diff --git a/app/features/sendouq-match/components/SendouQMatchBanner.tsx b/app/features/sendouq-match/components/SendouQMatchBanner.tsx
index a488fee9a..de57439e8 100644
--- a/app/features/sendouq-match/components/SendouQMatchBanner.tsx
+++ b/app/features/sendouq-match/components/SendouQMatchBanner.tsx
@@ -154,7 +154,14 @@ function SendouQMatchBannerTopRow({
}}
>
{data.match.isLocked || awaitingConfirmation ? (
-
+
) : (
{data.matchIsOver ? (
-
+
) : (
)}