Feature: Add event ended notice (#967) (#968)

Author: daveearley

frontend/src/components/layouts/EventHomepage/EventInformation/EventInformation.module.scss

@@ -9,6 +9,7 @@ import {EventNotAvailable} from "./EventNotAvailable";
 import {
     IconArrowUpRight,
     IconCalendar,
+    IconCalendarOff,
     IconCalendarPlus,
     IconExternalLink,
     IconMail,
@@ -36,6 +37,7 @@ import {removeTransparency} from "../../../utilites/colorHelper.ts";
 import {ShareComponent} from "../../common/ShareIcon";
 import {EventDateRange} from "../../common/EventDateRange";
 import {CalendarOptionsPopover} from "../../common/CalendarOptionsPopover";
+import {isDateInPast} from "../../../utilites/dates.ts";
 
 interface EventHomepageProps {
     event?: Event;
@@ -322,6 +324,18 @@ const EventHomepage = ({...loaderData}: EventHomepageProps) => {
                                             </CalendarOptionsPopover>
                                         </div>
 
+                                        {/* Event Ended */}
+                                        {event.end_date && isDateInPast(event.end_date) && (
+                                            <div className={classes.metaItem}>
+                                                <div className={classes.metaIconBox}>
+                                                    <IconCalendarOff/>
+                                                </div>
+                                                <div className={classes.metaContent}>
+                                                    <div className={classes.metaPrimary}>{t`This event has ended`}</div>
+                                                </div>
+                                            </div>
+                                        )}
+
                                         {/* Online Event */}
                                         {isOnlineEvent && (
                                             <div className={classes.metaItem}>

frontend/src/components/layouts/EventHomepage/EventInformation/index.tsx

@@ -116,3 +116,7 @@ export const dateToBrowserTz = (date: string, fallbackTz: string, locale?: strin
 export const isDateInFuture = (date: string): boolean => {
     return dayjs.utc(date).diff(dayjs()) > 0;
 };
+
+export const isDateInPast = (date: string): boolean => {
+    return dayjs.utc(date).diff(dayjs()) < 0;
+}