We will be grouping some of NEFAC's programs under an Education Initiatives category. Each program will have its own page, which will include some information about it in addition to upcoming and/or previous events depending on the program. This component will specifically be to implement the UI for upcoming presentations.
Note - it's hard to see in this screenshot, but there is a rounded light gray rectangle surrounding the event list. You can currently find the design for this component on "Page 2" of the Figma, in the design for the First Amendment & Free Presss page - do not include the title above it, and try to generalize it so it can work for any program.
Let's define an interface for upcoming events:
// to represent an upcoming event for a particular education initiative program
interface UpcomingEvent {
// a Date object representing the start date/time of the event
startDate: Date;
// event title
title: string;
// event location
location: string;
// optional URL the user can click on to register or learn more
infoUrl?: string;
}You should include the interface in your code and use it to define some mock data that can be passed into your component. The component should take in a list of UpcomingEvents as a property. Since the component won't be added to a page until #49 is done, you can create a testing page with that component (and the mock data) for now, and I'll remove it after reviewing.
The events should automatically be sorted from soonest (top) to latest (bottom) and limited to the first 5 events if there are more than 5 (use .slice()). If there are no events, show a user-friendly message like "There are no upcoming events for this program right now."
In the future, the UpcomingEvents will be fetched from some database or calendar, but you don't need to implement that functionality right now.
We will be grouping some of NEFAC's programs under an Education Initiatives category. Each program will have its own page, which will include some information about it in addition to upcoming and/or previous events depending on the program. This component will specifically be to implement the UI for upcoming presentations.
Note - it's hard to see in this screenshot, but there is a rounded light gray rectangle surrounding the event list. You can currently find the design for this component on "Page 2" of the Figma, in the design for the First Amendment & Free Presss page - do not include the title above it, and try to generalize it so it can work for any program.
Let's define an interface for upcoming events:
You should include the interface in your code and use it to define some mock data that can be passed into your component. The component should take in a list of
UpcomingEvents as a property. Since the component won't be added to a page until #49 is done, you can create a testing page with that component (and the mock data) for now, and I'll remove it after reviewing.The events should automatically be sorted from soonest (top) to latest (bottom) and limited to the first 5 events if there are more than 5 (use .slice()). If there are no events, show a user-friendly message like "There are no upcoming events for this program right now."
In the future, the
UpcomingEvents will be fetched from some database or calendar, but you don't need to implement that functionality right now.