Add event details page

[vmork]

• Added an EventDetails component that shows relevant information about a given event along with a signup link. Atm the api doesn't return any information about the number of people who signed up so couldn't include that.
• Merged with Xi's events overview branch and made it so that when you click an event on the overview page, the event details are displayed in a modal. This is done by setting and reading a url query param so should persist on page reload and respect browser back/forward navigation. But lmk if there are any issues with this regarding seo or something else, it's easy to change to just link to the student/events/[id] pages if we want that instead.
• Fixed some minor visual bugs on the events overview page.

Made this a draft pr since not sure if it makes sense to merge until we have some actual events.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
armada-nu	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 15, 2024 8:00pm

[hampfh]

I'm impressed, this looks really good and is well thought out!

The only thing design wise that came to mind is maybe reversing the position of the event when in mobile view, since text can be pretty long (you can use the attribute flex-col-reverse to change the direction of the content)

I also found on other thing, the EventDetails.tsx, EvenItem.tsx and EventsTimeline.tsx are good abstractions, but they should preferably be closer to where they are used, right now they are placed in /student/_components, but they are only used in /student/events/.... It would therefore make more sense to create a _components folder in the events folder

[hampfh]

Tip for reusable components (you don't have to fix this). In order to provide all the capabilities in the components as in native tags such as <div> what you can do is

// Now when invoking our component we can provide the event in addition
// to ALL other attributes that you can apply to a <div>, very good for
// accessibility etc
function EventDetails(props: React.HTMLAttributes<HTMLDivElement> & {
  event: Event
}) {
  // "rest" will be all the attributes in the props type that we did not
  // extract, in this case everything except "event" and "className"
  const { event, className, ...rest } = props 
  return (
    // Here we pass along all the div attributes to the tag
    <div className={cn("...", className} {...rest}>
  )
}

[hampfh]

Is there a specific reason for importing the global.css here? It should already be imported in the layout.tsx file at the top of the project, it should propagate down

Layout.tsx file
https://github.com/armada-ths/armada.nu/blob/main/src/app/layout.tsx

[vmork]

Nope, think I was trying some stuff and just left the import in by accident

[hampfh]

Here there should be an SEO section, see https://nextjs.org/docs/app/api-reference/functions/generate-metadata

We should at minimum return a title and a description for each event page