Skip to content

Conversation

@AdniSosa
Copy link
Contributor

@AdniSosa AdniSosa commented Dec 12, 2025

Description

In api.ts:

  1. Imported the longTermTimeLine.json file.
  2. Added the JSON to pageData with its corresponding path.

In long-term-timeline.tsx:

  1. Imported 2 components: Title and TimelineCard.
  2. Used the Title component with the title that appeared in Figma, which was not the same as the one that appeared in the JSON.
  3. I iterated through the JSON and displayed the data using the TimelineCard.
  4. Added the timeline lines and dots.
  5. Added footer and breadcrumbs.

**The TimelineCard didn't have the design colors. In issue #119 , where the card was created, you can see that the colors were later removed.
image

link to open issue --> #81

Type

  • Bug Fix
  • New Feature
  • Code Refactor
  • Documentation
  • Other

Related Issue

Screenshots

image

Testing

Pull request checklist

Please check if your PR fulfills the following requirements:

  • I checked and followed the contributor guide
  • I have tested my changes locally.
  • I have added a screenshot from the website after I tested it locally

@sonarqubecloud
Copy link

@AdniSosa
Copy link
Contributor Author

Unit and E2E Tests / test (20) (pull_request) --> this test is failing.

{data ? <p> Data Loaded </p> : <p> No Data </p>}
<Title title={'Long-Term Mentorship Timeline'} />

{data?.events?.items?.map((item, index) => (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please try to use this one: https://mui.com/material-ui/react-timeline/ - that should display the timeline dots and lines and you can use the card itself for the content

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"I've pushed the changes, please let me know if it looks good now."

@sonarqubecloud
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants