-
Notifications
You must be signed in to change notification settings - Fork 73
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reduce repetitive code of Frontend Roadmap Component #292
Reduce repetitive code of Frontend Roadmap Component #292
Conversation
✅ Deploy Preview for fossc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Hey @NegiSushant , can you please fix the incorrect placement of the arrows ? |
|
||
</div> | ||
); | ||
<div className="flex flex-wrap justify-center gap-4 mx-4 md:mx-20"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use grid-cols-7
which allows for better control over the placement of the courses and arrows.
src/components/frontend.jsx
Outdated
); | ||
<div className="flex flex-wrap justify-center gap-4 mx-4 md:mx-20"> | ||
{courses.map((course, index) => ( | ||
<div key={index}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can also use React.Fragment to group each course with its corresponding arrow which can help ensure that the arrow is placed in the next grid column.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
got it! fixed.
hey @Mr-Sunglasses ! I review my code and the result show me after change is: |
Yeah @NegiSushant It looks good, please push those changes :-) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @NegiSushant
Description
This pull request improves the UI and maintainability of the frontend Roadmap component. The changes include:
These changes make the component easier to manage, more responsive, and visually appealing.
This PR fixes #291