diff --git a/src/components/UI/Typography/Subtle.tsx b/src/components/UI/Typography/Subtle.tsx index 60c45155..172e37ec 100644 --- a/src/components/UI/Typography/Subtle.tsx +++ b/src/components/UI/Typography/Subtle.tsx @@ -1,7 +1,12 @@ +import { cn } from "@app/core/utils/cn.js"; + export interface SubtleProps { + className?: string; children: React.ReactNode; } -export const Subtle = ({ children }: SubtleProps): JSX.Element => ( -
{children}
+export const Subtle = ({ className, children }: SubtleProps): JSX.Element => ( ++ {children} +
); diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx index 39d5ef87..f1f47ff6 100644 --- a/src/pages/Map.tsx +++ b/src/pages/Map.tsx @@ -14,13 +14,17 @@ import { import { bbox, lineString } from "@turf/turf"; import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js"; import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js"; -import { Protobuf } from "@meshtastic/meshtasticjs"; +import { Subtle } from "@app/components/UI/Typography/Subtle.js"; +import { cn } from "@app/core/utils/cn.js"; +import { useCallback, useEffect, useState } from "react"; export const MapPage = (): JSX.Element => { - const { nodes, waypoints, addWaypoint, connection } = useDevice(); + const { nodes, waypoints } = useDevice(); const { rasterSources } = useAppStore(); const { default: map } = useMap(); + const [zoom, setZoom] = useState(0); + const allNodes = Array.from(nodes.values()); const getBBox = () => { @@ -53,6 +57,12 @@ export const MapPage = (): JSX.Element => { }); }; + useEffect(() => { + map?.on("zoom", () => { + setZoom(map?.getZoom() ?? 0); + }); + }, [map, zoom]); + return ( <>