mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
4e478722c3
Rebuilds the /collections page from the functional placeholder into the dashboard's glass visual language (light + dark): - A colour-washed hero per list: eyebrow + member avatars, big title, and stat chips (All / Idea / Want / Visited) that double as the status filter. - A sticky glass list rail (owned + shared + invites) with a mobile drawer. - Gradient/photo cover place cards modelled on the trip cards, via a new rectangular PlaceCover (photoService-backed, gradient fallback) + a shared gradients util. List and map views restyled to match. - Status pill rendered as a role=button span so it survives the .trek-dash button reset and can nest inside the card; the share member-count badge is now owner-only. - New hero eyebrow strings across all locales.
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import { MapViewAuto } from '../Map/MapViewAuto'
|
|
import type { CollectionPlace } from '@trek/shared'
|
|
import { mappablePlaces } from '../../pages/collections/collectionsModel'
|
|
|
|
interface CollectionMapProps {
|
|
places: CollectionPlace[]
|
|
selectedPlaceId: number | null
|
|
onOpenPlace: (id: number) => void
|
|
dark: boolean
|
|
}
|
|
|
|
/**
|
|
* Map view — reuses the trip map stack (MapViewAuto → Leaflet / GL with marker
|
|
* clustering). One of the three list views; clicking a marker selects the place.
|
|
* The parent `.col-mapwrap` supplies the rounded, bordered box + height, so this
|
|
* just fills it.
|
|
*/
|
|
export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, dark }: CollectionMapProps): React.ReactElement {
|
|
const pts = mappablePlaces(places)
|
|
const center: [number, number] = pts.length > 0
|
|
? [pts[0].lat as number, pts[0].lng as number]
|
|
: [48.8566, 2.3522]
|
|
const tileUrl = dark
|
|
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
|
|
: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
|
|
|
|
return (
|
|
<div style={{ width: '100%', height: '100%' }}>
|
|
<MapViewAuto
|
|
places={pts}
|
|
selectedPlaceId={selectedPlaceId}
|
|
onMarkerClick={onOpenPlace}
|
|
center={center}
|
|
zoom={pts.length > 0 ? 6 : 3}
|
|
tileUrl={tileUrl}
|
|
fitKey={pts.length}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|