Create Event Card

[jasonyu0705]

Description

Create the Event/Day Card component for Operation Surf as shown in the attached design. This is a sub-issue because the Program Details page will pull and render this card component in its list section. All displayed content on the card must be pulled from the database (no hardcoded values).

The card should display the following Event/Day fields:

• dayOfWeek
• date
• name
• startTime - endTime

Note: eventId and programId do not need to be displayed on the front end, but are required for linking and querying.

Day data model

• name
• dayOfWeek
• date
• startTime
• endTime
• eventId
• programId

Image

Acceptance Criteria

• Card UI matches the attached design (day + date pills, title, time row with icon).
• Card fields (dayOfWeek, date, name, startTime - endTime) render from DB-provided data.
• Card accepts Event/Day data as props (or equivalent) and does not fetch data itself.
• eventId and programId are supported in the data interface but are not displayed.
• Date/time formatting is consistent with the mock (e.g., May 5, 10:00 AM - 1:00 PM).
• Card is keyboard accessible and responsive across screen sizes.

Steps

• Build the card component layout to match the design (pills, title, time row).
• Define the component interface/props to accept: name, dayOfWeek, date, startTime, endTime, eventId, programId.
• Implement date formatting for the date field (e.g., May 5).
• Implement time range formatting for startTime and endTime (e.g., 10:00 AM - 1:00 PM).
• Add basic error checking / fallbacks for missing fields (e.g., empty strings, invalid dates).