This bounty is no longer available
Web3 DAO | status-im Logo

Implement algorithm for tiling images for collectibles

Organization

status-im

Deadline

over 1 year ago

Status

ENDED

800 USD

INSTRUCTIONS

We need to implement the component below.

The scope of this task is to implement the behavior when displaying tiles (image only in the design). You can use the test images taken from Figma from this, ultimately they will be passed to the component as a URL.

Tiles have all the same size.

Depending on how many images the component is passed, it should display them according to the design, for example:

1 Image: The image will occupy the whole tile 2 Images: The two images should share the space within the tile: https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System?node-id=2010%3A35736&t=QtTqoPpY029TXvwX-4

and so on

If there are 8 or more images, the design is https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System?node-id=2010%3A31247&t=QtTqoPpY029TXvwX-4 . +x indicates how many images are not displayed within the collection.

Out of scope: Text component (Doodle #...) and interactions/animations

Designs

https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System?node-id=15671%3A187484&t=5oN55S16EhsyENzY-0