Move to waypoints from location

2022-08-31 17:32:19 +10:00
parent 0374b00359
commit c0be3bb2ba
8 changed files with 177 additions and 134 deletions
@@ -0,0 +1,52 @@
+import type React from "react";
+
+import {
+  Heading,
+  LocateIcon,
+  majorScale,
+  minorScale,
+  Pane,
+  Small,
+  Text,
+} from "evergreen-ui";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { toMGRS } from "@core/utils/toMGRS.js";
+
+export interface WaypointMessageProps {
+  waypointID: number;
+}
+
+export const WaypointMessage = ({
+  waypointID,
+}: WaypointMessageProps): JSX.Element => {
+  const { waypoints } = useDevice();
+  const waypoint = waypoints.find((wp) => wp.id === waypointID);
+
+  return (
+    <Pane
+      marginLeft={majorScale(2)}
+      paddingLeft={majorScale(1)}
+      borderLeft="3px solid #e6e6e6"
+    >
+      <Pane
+        gap={majorScale(1)}
+        display="flex"
+        borderRadius={majorScale(1)}
+        elevation={1}
+        padding={minorScale(1)}
+      >
+        <LocateIcon color="#474d66" marginY="auto" />
+        <Pane>
+          <Pane display="flex" gap={majorScale(1)}>
+            <Heading>{waypoint?.name}</Heading>
+            <Text color="orange">
+              {toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
+            </Text>
+          </Pane>
+          <Small>{waypoint?.description}</Small>
+        </Pane>
+      </Pane>
+    </Pane>
+  );
+};