feat: spaces page

[vitormpp]

Closes #7

Spaces Page

• The user can click on a category button to filter places by category (the map dynamically adjusts its view to fit the bounds of all the places in the selected category);

lg - @media (min-width: 1024px)	Otherwise

• The user can interact with either the map or the list of places to select and highlight a specific place (the map zooms in on the coordinates of the selected place and centers the map on it).
• Each category has a different marker.

• If no place exists for the selected category, a message is displayed.

State Management selectedCategory: tracks the current selected category (default is 0 - the 1st category) selectedPlace: tracks the currently selected place on the map/list of places

Screenshots:

Which one? 🤔

Map	Desktop	Mobile
Leaflet (default)
Leaflet (Stadia.AlidadeSmooth)
Leaflet (CartoDB.PositronNoLabels)

NOTE: I have already implemented a version using MapLibre GL JS (a TypeScript library that uses WebGL to render interactive maps from vector tiles in a browser). However, the deafult style (style: 'https://demotiles.maplibre.org/style.json') only renders colors without any labels/streets/buildings... If you do not like any of the previous leaflet styles, feel free to indicate any (free) open source style for maplibre.

TO DO:

• [ ] Sort places by distance using the Haversine formula, that determines the great-circle distance between two points on a sphere (different approaches can be found here)

  Actually, I've already done the code (but it is ugly)

[netlify[bot]]

❌ Deploy Preview for websiteae failed.

Name	Link
🔨 Latest commit	817711aba95ba31d1fe8a8c58da88d50cd936928
🔍 Latest deploy log	https://app.netlify.com/sites/websiteae/deploys/673cbcd55fc72e0008730c98

[bdmendes]

Work in progress should be drafted 👀

[vitormpp]

Work in progress should be drafted 👀

I know