Implement Younite member modal

[matthewyingtao]

User story:

As a user,
I want to be shown a modal on click,
So that I can know more about the member.

Description:

When a younite member card is clicked, it should display a modal that's fixed to the screen.

The modal should darken its backdrop.

Use the following mock data to make the component generic:

type Member = {
  name: string;
  role: string;
  description: string;
  funFact: string;
}

const member: Member = {
  name: "John Sutter",
  role: "Sub-Committee Leader + Wellbeing Officer",
  description: "Hey, I’m Hunter (he/him) and I’m entering my legacy arc in Younite. I’m passionate about local politics and grassroots activism and excited to hand over the baton to the next group of young leaders. In my spare time I run and watch far too many movies (send me your Letterboxd lists!)",
  funFact: "I used to live in Costa Rica (although my spanish is now very bad). It’s great to meet you all!"
}

function MemberModal({ name, role, description, funFact, visible } : Member & { visible: boolean }) {}

Acceptance Criteria:

• The component takes a person object as a parameter
• The component visually matches design

Definition of Done:

• AC met
• Applicable tests written
• Applicable documentation is written in GH wiki
• PR reviewed
• Merged into main/feature branch

Notes / Links