2.0 Overhaul start

2022-09-22 16:35:40 +10:00
parent 4e45990ef5
commit a73eab1ea6
87 changed files with 2880 additions and 3573 deletions
@@ -0,0 +1,33 @@
+import type React from "react";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { toMGRS } from "@core/utils/toMGRS.js";
+import { MapPinIcon } from "@heroicons/react/24/outline";
+
+export interface WaypointMessageProps {
+  waypointID: number;
+}
+
+export const WaypointMessage = ({
+  waypointID,
+}: WaypointMessageProps): JSX.Element => {
+  const { waypoints } = useDevice();
+  const waypoint = waypoints.find((wp) => wp.id === waypointID);
+
+  return (
+    <div className="ml-4 pl-2 border-l-slate-200 border-l-2">
+      <div className="gap-2 flex rounded-md p-2 shadow-md shadow-orange-300">
+        <MapPinIcon className="m-auto w-6 text-slate-600" />
+        <div>
+          <div className="flex gap-2">
+            <div className="font-bold">{waypoint?.name}</div>
+            <span className="text-sm font-mono text-slate-500">
+              {toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
+            </span>
+          </div>
+          <span className="text-sm">{waypoint?.description}</span>
+        </div>
+      </div>
+    </div>
+  );
+};