Implement Pagination for Tracks

[javed-ak]

Description:

This PR introduces pagination functionality for the Tracks component, ensuring that the content is properly paginated and displayed in a user-friendly way. The main objective was to display a set number of tracks per page (10 in this case) and provide pagination controls to navigate through different pages of content.

PR Fixes:

1. Pagination Logic:

• Implemented pagination controls using the Pagination component from @repo/ui.
• Each page displays 10 tracks (tracksPerPage = 10).
• The PaginationPrevious, PaginationNext, and page numbers dynamically adjust based on the current page and the total number of tracks.

2. State Management:

• Added state to handle the current page (currentPage), filtered tracks (filteredTracks), and visible tracks (visibleTracks).
• Pagination re-renders the visible tracks based on the selected page.

Resolves #609, #651

Before

Before.mp4

After

After.mp4

Checklist before requesting a review

• I have performed a self-review of my code
• I assure there is no similar/duplicate pull request regarding same issue

[jals413]

In my view, implementing pagination on the frontend doesn’t add value or improve code efficiency. If pagination is required, it’s more efficient to handle it in the backend to optimize performance and manage resources effectively.

[javed-ak]

In my view, implementing pagination on the frontend doesn’t add value or improve code efficiency. If pagination is required, it’s more efficient to handle it in the backend to optimize performance and manage resources effectively.

I think if there were some problems then you would have been absolutely right but there are a lot of problems and they will keep getting added in the future if I am not wrong. And even now if you visit on the website you see lot of problems there, there is also a filter option so anyone can filter according to their need.