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 ? ( - + ) : ( )}