You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.0 KiB
33 lines
1.0 KiB
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>
|
|
);
|
|
};
|
|
|