Create `DashboardListItem` component

[zaviermiller]

Description

Create a component that can display an applicant on the dashboard list.
The component should look like this

Technical Details

• file should be applicant-tracking/src/components/DashboardListItem/index.tsx
  Use the MUI List Item for this story.
  Use the MUI Button for the action button

The list item should take the following props:

• applicant: DashboardListApplicantResponse - The applicant we want to display

The component should display the following information:

• The applicant name (applicant.firstName applicant.lastName)
• The applicants status (applicant.status)
• The date that they hit this status (applicant.statusUpdatedAt)
  • The color should be based on how long ago this date is. If it's been < 3 days, it should be gray. If < 7 days it should be orange. If >= 7 days, it should be red.
• A different button based on what their status is
  • Look at the Figma (linked below) to see what the button should say for each status.
  • It needs to be a different button component so that we can have different behavior for each button (don't just change the text)

Teachables

Sometimes you will want display different components based on certain conditions. To achieve this, we can create a function that returns different HTML based on some conditions:

function ConditionalButton(condition: string) {
  if (condition == "1") {
    return <Button>1</Button>;
  } else if (condition == "2") {
    return <Button>2</Button>;
  } else {
    return null;
  }
}

And then we can use that function in our component

export default function Component() {
  const button = ConditionalButton("1");

  return (
  <div>
    { button }
  </div>
  )
}

Testing Steps

Simply put the component on a page, pass it some different props and ensure everything works as expected.

Dependencies

• None