# RMRK tech test

Your task is to create a paginated view of nfts

The end goal we are looking for is an UI that displays a grid of 20 items per page with each displaying a name, cover and serial number

Ui must contain pagination controls, current page, and total page amount
Bonus points for filtration (for example "Display forsale only" (forsale > 0))

Structure your app in such way that each nft is clickable and opens a simple page for each nft atleast containing a name and a media
`/nfts/${nftId}`

**Example**: https://singular.app/collectibles?page=1

Bonus additional requirement:

Have a simple dropdown for user to select how many NFTs to display per page (10, 20, 50). Use [zustand](https://github.com/pmndrs/zustand) with zustand persist middleware (localstorage) as a state-management to save user's choice.

**Data**: https://singular.app/api/rmrk2/account/CdA62JpyfEyEASA5XKYJAyYZmdQPqe5X9x8MLnoTWtc9rNn

**Data for a single NFT page**
https://singular.app/api/rmrk2/nft/11683527-74494d37fc53428637-NFKUSAMA-1_NFK-00000021

Keep in mind that some of the data, like cover image are containened within the metadata of each entry. This can be retrieved by taking the CID from `metadata` and fetched through our gateway

**CID from metadata example** -
"metadata": "ipfs://ipfs/`bafkreidv77pyz37zl7lge5kpds77jmewrhdgnlefkxsu7spehqeads5a5a`", last part of this is the CID

So gateway url would look like this
https://rmrk.mypinata.cloud/ipfs/bafkreidv77pyz37zl7lge5kpds77jmewrhdgnlefkxsu7spehqeads5a5a

### Tech requirements

- Use Next.js - https://nextjs.org/
- Use Chakra UI - https://chakra-ui.com/
- Use Typescript