Add Custom and reusable pagination

Hi there,

Long time did not post anything. I have recently added a new feature into the page. It is pagination 👏🏻. From now, I can fix the height of the pages and do not need to worry about applying back to top of page anymore.

This feature was sponsored by Material UI Pagination Component 🎁 for the UI. But I did modified it very much following my ideas:

First, I have add margin between the pages number through vanilla-extract typescript css.

Then, I have turned the CustomPagination Component to a wrapper component, where I can display all of the pages inside it. Provided the options to put the pagination list below or on the top of button. Of course, the Custom Pagination itself is just a structure, I then have to add the Child Component to display (as we might want a different style of Child Component):

<CustomPagination position="top" elements={records} totalCount={records.length} pageSize={9} ChildComponent={Picture}/>

-code

We can see above example. elements store all the information about the children that you want to divide into Pagination. totalCount is for calculation the displayed pagination buttons. pageSize defined how many elements per pages we want and ChildComponent is the styled Child Component which we want to carry child information props.

There are a difficulties when I did try to pass the key to the child components from the beginning (they were not passed). But eventually, it did. Thanks 🥲.

So, I now can apply the custom pagination to display every list.