Add support for gender specified on event card

data/groups/alpha-run-club/details.json

@@ -32,7 +32,7 @@
     {
       "name": "Monthly Plogging Event",
       "time": {
-        "frequency": "Monthly",
+        "frequency": "Last Sunday of the month",
         "weekday": "Sunday",
         "start": "Jan 1, 1970 11:00",
         "end": "Jan 1, 1970 13:00",

data/groups/bristol-ultimate-development/details.json

@@ -26,7 +26,7 @@
       },
       "booking": {
         "required": true,
-        "details": "Please join the Facebook group and vote in the latest poll."
+        "details": "Booking recommended so the organisers have a sense of numbers, please join the Facebook group and vote in the latest poll."
       },
       "url": "https://www.facebook.com/groups/bristolultimatedevelopment/"
     },
@@ -51,7 +51,7 @@
       },
       "booking": {
         "required": true,
-        "details": "Please join the Facebook group and vote in the latest poll."
+        "details": "Booking recommended so the organisers have a sense of numbers, please join the Facebook group and vote in the latest poll."
       },
       "url": "https://www.facebook.com/groups/bristolultimatedevelopment/"
     }

data/groups/girls-who-walk-bristol/details.json

@@ -12,10 +12,10 @@
       "details": "",
       "time": {
         "frequency": "Weekly",
-        "weekday": "Wednesday",
+        "weekday": "Sunday",
         "start": "Jan 1, 1970 10:30",
         "end": "Jan 1, 1970 12:00",
-        "details": "Check the Instagram page for the latest details."
+        "details": "Please check the Instagram page for the latest details."
       },
       "locationURL": "https://www.instagram.com/girlswhowalkbristol/",
       "cost": {
@@ -24,6 +24,7 @@
       "booking": {
         "required": false
       },
+      "gender": "Women",
       "url": "https://www.instagram.com/girlswhowalkbristol/"
     }
   ]

data/groups/ride-bristol/details.json

@@ -53,7 +53,8 @@
       "booking": {
         "required": false
       },
-      "url": "https://www.instagram.com/ridebristol/"
+      "url": "https://www.instagram.com/ridebristol/",
+      "gender": "Women and marginalised genders"
     }
   ]
 }

src/components/EventCard/EventCard.tsx

@@ -5,6 +5,8 @@ import { WalletIcon } from '@/components/Icons/WalletIcon';
 import { LocationIcon } from '@/components/Icons/LocationIcon';
 import { ReceiptIcon } from '@/components/Icons/ReceiptIcon';
 import { ExternalIcon } from '@/components/Icons/ExternalIcon';
+import { FemaleIcon } from '@/components/Icons/FemaleIcon';
+import { MaleIcon } from '@/components/Icons/MaleIcon';
 import { getAMPMTimeFromDateString } from '@/utils/utils';
 import { Event } from '@/types/Event';
 import styles from './EventCard.module.scss';
@@ -16,9 +18,21 @@ const EventCard = ({
     locationURL,
     booking,
     url,
+    gender,
 }: Event) => {
     return (
         <div className={styles.details}>
+            {gender && (
+                <div className={styles.details__item}>
+                    {gender === 'Women' && (
+                        <FemaleIcon className={styles.details__icon} />
+                    )}
+                    {gender === 'Men' && (
+                        <MaleIcon className={styles.details__icon} />
+                    )}
+                    <p>Open to {gender.toLowerCase()} only.</p>
+                </div>
+            )}
             {time && (
                 <div className={styles.details__item}>
                     <ClockIcon className={styles.details__icon} />

src/components/Icons/FemaleIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IconProps } from '@/types/Icon';
+
+export const FemaleIcon = ({ className, fill }: IconProps) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            className={className}
+        >
+            <path
+                d="M12 2C9.24 2 7 4.24 7 7C7 9.42 8.72 11.44 11 11.9V14H9V16H11V19H13V16H15V14H13V11.9C15.28 11.44 17 9.42 17 7C17 4.24 14.76 2 12 2ZM12 4C13.66 4 15 5.34 15 7C15 8.66 13.66 10 12 10C10.34 10 9 8.66 9 7C9 5.34 10.34 4 12 4Z"
+                fill={fill || 'currentColor'}
+            />
+        </svg>
+    );
+};

src/components/Icons/MaleIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconProps } from '@/types/Icon';
+
+export const MaleIcon = ({ className, fill }: IconProps) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 700 700"
+            className={className}
+        >
+            <path
+                fill={fill || 'currentColor'}
+                transform="translate(120, 66)"
+                d="m456.72 96.62-115.49 115.5c22.46 31.03 35.72 69.17 35.72 110.41 0 52.04-21.1 99.17-55.2 133.27-34.11 34.1-81.23 55.21-133.28 55.21-52.03 0-99.17-21.11-133.27-55.21C21.1 421.7 0 374.57 0 322.53c0-52.04 21.1-99.17 55.2-133.27 34.1-34.1 81.23-55.21 133.27-55.21 42.91 0 82.47 14.35 114.16 38.5L419.89 55.28h-62.84V0H512v158.91h-55.28V96.62zM282.66 228.35c-24.1-24.1-57.41-39.02-94.19-39.02s-70.08 14.92-94.18 39.02c-24.1 24.1-39.01 57.4-39.01 94.18 0 36.78 14.91 70.09 39.01 94.19 24.1 24.1 57.4 39.01 94.18 39.01 36.78 0 70.09-14.91 94.19-39.01 24.1-24.1 39.01-57.41 39.01-94.19s-14.91-70.08-39.01-94.18z"
+            />
+        </svg>
+    );
+};

src/pages/events/[slug].tsx

@@ -49,8 +49,7 @@ const EventDetailsSection = ({
 /**
  * Renders all of the event details - accepts a heading level parameter
  * to allow for multiple events to be rendered on the same page, separated
- * by a <h2> title referencing `event.name`. Note if event.name is not
- * provided, this component won't meet accessibility criteria and fail.
+ * by a <h2> title referencing `event.name`.
  */
 const Event = ({
     event,
@@ -59,20 +58,13 @@ const Event = ({
     event: any;
     sectionTitleHeadingLevel: 'h2' | 'h3';
 }) => {
-    const timeSectionTitle =
-        event.time.frequency === 'Weekly'
-            ? `Every ${event.time.weekday}`
-            : `${event.time.frequency}
-                from ${get24HourTimeFromDateString(event.time.start)} to
+    const timeSectionTitle = `${event.time.frequency === 'Weekly' ? `Every ${event.time.weekday}` : event.time.frequency} from ${get24HourTimeFromDateString(event.time.start)} to
                 ${get24HourTimeFromDateString(event.time.end)}`;
 
-    if (event.name && sectionTitleHeadingLevel === 'h2') {
-        throw Error("`event.name` provided for event that doesn't need one");
-    }
-
     return (
         <div>
-            {event.name && (
+            {/* Only display the name of the event if there are multiple events */}
+            {event.name && sectionTitleHeadingLevel !== 'h2' && (
                 <h2 className={styles.event__title}>{event.name}</h2>
             )}
 

src/types/Event.ts

@@ -1,3 +1,5 @@
+import { Gender } from '@/types/base';
+
 export type EventCost = {
     sessionPrice: number;
     details: string;
@@ -47,4 +49,5 @@ export type Event = {
     locationURL?: string;
     cost?: EventCost;
     booking?: EventBooking;
+    gender?: Gender; // defaults to all if left blank
 };

src/types/Group.ts

@@ -1,4 +1,5 @@
-import { Event } from './Event';
+import { Gender } from '@/types/base';
+import { Event } from '@/types/Event';
 
 export type GroupType = 'Discord' | 'Regular' | 'Ad-hoc' | string;
 
@@ -11,4 +12,5 @@ export type Group = {
     events?: Event[];
     type?: GroupType;
     url?: string; // a link to the groups homepage or group chat invite
+    gender?: Gender; // defaults to all if left blank
 };

src/types/base.ts

@@ -0,0 +1,3 @@
+export type Gender = 'Men' | 'Women' | string;
+// By default it's assumed groups and events are open to all genders
+// The optional `string` type allows for other / more specific gender definitions