diff --git a/public/tailwind.config.d.ts b/public/tailwind.config.d.ts index 556cbd6..861c2dd 100644 --- a/public/tailwind.config.d.ts +++ b/public/tailwind.config.d.ts @@ -34,12 +34,14 @@ export declare const DreamPipColors: { secondary: string; bw: string; white: string; + bg: string; }; dark: { primary: string; secondary: string; bw: string; white: string; + bg: string; }; }; primary: { @@ -140,12 +142,14 @@ declare const _default: { secondary: string; bw: string; white: string; + bg: string; }; dark: { primary: string; secondary: string; bw: string; white: string; + bg: string; }; }; primary: { diff --git a/public/tailwind.config.js b/public/tailwind.config.js index 5736b9d..f955790 100644 --- a/public/tailwind.config.js +++ b/public/tailwind.config.js @@ -94,12 +94,14 @@ exports.DreamPipColors = { secondary: secondary, bw: n300, white: white, + bg: dark1, }, dark: { primary: primary, secondary: secondary, bw: white, white: white, + bg: light1, }, }, primary: { diff --git a/public/tailwind.config.ts b/public/tailwind.config.ts index 58cde07..5a22ca6 100644 --- a/public/tailwind.config.ts +++ b/public/tailwind.config.ts @@ -107,12 +107,14 @@ export const DreamPipColors = { secondary, bw: n300, white: white, + bg: dark1, }, dark: { primary, secondary, bw: white, white: white, + bg: light1, }, }, primary: { diff --git a/src/atoms/10_Grid/Grid.tsx b/src/atoms/10_Grid/Grid.tsx index 982a2ad..53ae100 100644 --- a/src/atoms/10_Grid/Grid.tsx +++ b/src/atoms/10_Grid/Grid.tsx @@ -149,11 +149,14 @@ export const HGrid = function ({ const gridRowStyles = `${clsx(gridRowSx)} ${gridColumnStyles} ${bleedStyles}`; - const mappedChildren = Children.map(children, (child: any) => ( - - {child} - - )); + const mappedChildren = Children.map(children, (child: any) => { + if (!child) return undefined; + return ( + + {child} + + ); + }); return ( void; title?: string; + description?: string; + latlng?: ILocation; where?: string; when?: string; - price?: string; + value?: string; link?: string; rating?: string; + badgeText?: string; badgeLink?: string; selected?: boolean; - image?: string; + images?: string[]; background?: ECardBackground; theme?: 'light' | 'dark'; } @@ -48,16 +57,19 @@ export const HCard = function ({ id = 'atom__Card', className = '', onLike = () => {}, - rating = '4.5/5', + rating = '', link = 'https://dreampip.com', title = 'This is a very long title for a card to see how it displays on it.', + description = 'This is a very long description for a card to see how it displays on it.', where = 'Home', when = 'Whenever', + latlng = { lat: 0, lng: 0, radius: 0.4 }, selected = false, - price = '1900€', + value = '1800£', background = ECardBackground.NONE, + badgeText = '', badgeLink = '', - image = 'https://placehold.co/600x400', + images = ['https://placehold.co/600x400'], theme = 'light', }: ICard) { const gridSx = [ @@ -84,59 +96,125 @@ export const HCard = function ({ background === ECardBackground.NONE ? undefined : EGradientVariant.WHITE } > - - - - - - {rating} - - diff --git a/src/molecules/04_Map/MapView.tsx b/src/molecules/04_Map/MapView.tsx index ea1b790..244b80d 100644 --- a/src/molecules/04_Map/MapView.tsx +++ b/src/molecules/04_Map/MapView.tsx @@ -5,11 +5,12 @@ import clsx from 'clsx'; import Map, { Source, Layer, Popup as GLPop } from 'react-map-gl'; import bbox from '@turf/bbox'; -import React, { useRef, useState, useEffect } from 'react'; +import React, { useRef, useState, useEffect, useMemo } from 'react'; import { Button, ButtonVariant, EButtonTheme } from '../../atoms/01_Button'; import { Typography } from '../../atoms/02_Typography'; import { Link } from '../../atoms/03_Link'; import { SystemIcon, ESystemIcon } from '../../atoms/05_SystemIcon'; +import { DreamPipColors } from '../../../tailwind.config.ts'; import 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; @@ -275,50 +276,6 @@ export const MAP_CENTRES = { }, }; -export const clusterLayer = { - id: 'clusters', - type: 'circle', - source: 'molecule__MapView', - filter: ['has', 'point_count'], - paint: { - 'circle-color': [ - 'step', - ['get', 'point_count'], - '#fff', - 10, - '#22cc00', - 30, - '#cc2200', - ], - 'circle-radius': ['step', ['get', 'point_count'], 20, 5, 30, 10, 40], - }, -}; - -export const clusterCountLayer = { - id: 'molecule__MapView', - type: 'symbol', - source: 'molecule__MapView', - filter: ['has', 'point_count'], - layout: { - 'text-field': '{point_count_abbreviated}', - // 'text-font': ['Comfortaa', 'Arial Unicode MS Bold'], - 'text-size': 12, - }, -}; - -export const unclusteredPointLayer = { - id: 'point', - type: 'circle', - source: 'molecule__MapView', - filter: ['!', ['has', 'point_count']], - paint: { - 'circle-color': '#fff', - 'circle-radius': 10, - 'circle-stroke-width': 1, - 'circle-stroke-color': '#fff', - }, -}; - export const DEFAULT_EVENTS = { calData: [ { @@ -374,7 +331,7 @@ export enum EMapViewVariant { export interface IMapView { id?: string; className?: string; - events?: any; + mapData?: any; locale?: string; mobile?: boolean; city?: string; @@ -415,7 +372,7 @@ const Popup = function ({ return ( {localization.calendar} @@ -479,7 +436,7 @@ const Popup = function ({ export const HMapView = function ({ id = 'molecule__MapView', className = '', - events = DEFAULT_EVENTS, + mapData = DEFAULT_EVENTS, locale, mobile, city, @@ -489,6 +446,67 @@ export const HMapView = function ({ fetchNewData, theme = 'light', }: IMapView) { + const clusterLayer = { + id: 'clusters', + type: 'circle', + source: 'molecule__MapView', + filter: ['has', 'point_count'], + paint: { + 'circle-color': [ + 'step', + ['get', 'point_count'], + theme === 'dark' + ? DreamPipColors.icon.dark.bg + : DreamPipColors.icon.light.bg, + 10, + theme === 'dark' + ? DreamPipColors.icon.dark.secondary + : DreamPipColors.icon.light.secondary, + 30, + theme === 'dark' + ? DreamPipColors.icon.dark.primary + : DreamPipColors.icon.light.primary, + ], + 'circle-radius': ['step', ['get', 'point_count'], 20, 5, 30, 10, 40], + }, + }; + + const clusterCountLayer = { + id: 'molecule__MapView', + type: 'symbol', + source: 'molecule__MapView', + filter: ['has', 'point_count'], + layout: { + 'text-field': '{point_count_abbreviated}', + // 'text-font': ['Comfortaa', 'Arial Unicode MS Bold'], + 'text-size': 12, + }, + }; + + console.log({ DreamPipColors }); + + const unclusteredPointLayer = useMemo( + () => ({ + id: 'point', + type: 'circle', + source: 'molecule__MapView', + filter: ['!', ['has', 'point_count']], + paint: { + 'circle-color': + theme === 'dark' + ? DreamPipColors.icon.dark.bg + : DreamPipColors.icon.light.bg, + 'circle-radius': 10, + 'circle-stroke-width': 1, + 'circle-stroke-color': + theme === 'dark' + ? DreamPipColors.icon.dark.bg + : DreamPipColors.icon.light.bg, + }, + }), + [theme, DreamPipColors], + ); + const mapRef = useRef(null); const popup = useRef({ open: false, feature: undefined }); const hoverPopup = useRef(null); @@ -551,15 +569,15 @@ export const HMapView = function ({ }; useEffect(() => { - if (events?.timeframe !== timeframe) { + if (mapData?.timeframe !== timeframe) { fetchNewData({ force: true }); } }, [timeframe]); useEffect(() => { - // if (!events?.mapData) return; - if (mapRef?.current && events?.mapData?.features?.length) { - const bounds = bbox(events?.mapData); + // if (!mapData?.mapData) return; + if (mapRef?.current && mapData?.mapData?.features?.length) { + const bounds = bbox(mapData?.mapData); if (bounds?.length) { try { @@ -569,7 +587,7 @@ export const HMapView = function ({ } } } - }, [JSON.stringify(events?.mapData)]); + }, [JSON.stringify(mapData?.mapData)]); const onClick = (event) => { const [target] = event.features; @@ -631,7 +649,7 @@ export const HMapView = function ({ ) : undefined} {hoverPopupOpen && hoverPopup.current ? ( diff --git a/tailwind.config.ts b/tailwind.config.ts index 58cde07..5a22ca6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -107,12 +107,14 @@ export const DreamPipColors = { secondary, bw: n300, white: white, + bg: dark1, }, dark: { primary, secondary, bw: white, white: white, + bg: light1, }, }, primary: {