Refactoring to facilitate creating new Wpts

src/components/finder/Finder.tsx

@@ -7,7 +7,7 @@ import { useI18n } from '@solid-primitives/i18n';
 import proj4 from 'proj4';
 
 import style from './Finder.module.css';
-import { Box, IconButton, TextField } from '@suid/material';
+import { Box, Button, IconButton, TextField } from '@suid/material';
 import Dialog from '../dialog';
 import { getMap, getState } from '../map';
 import { Overlay } from 'ol';
@@ -47,7 +47,7 @@ const Finder: Component<Props> = (props) => {
         const utm = `+proj=utm +zone=${utmMatch[1]}`;
         coordinates = proj4(utm, 'EPSG:4326', [+utmMatch[3], +utmMatch[4]]);
         setPopupContent(
-          <>{`${coordinates[0]}, ${coordinates[1]} (${utmMatch[0]})`}</>
+          <>{`${coordinates[0]}, ${coordinates[1]} (UTM ${utmMatch[0]})`}</>
         );
       }
       console.log({
@@ -118,11 +118,15 @@ const Finder: Component<Props> = (props) => {
       <div id='popup' class={style.ol_popup}>
         <a
           href='#'
-          id='popup-closer'
           onclick={popupCloseHandler}
           class={style.ol_popup_closer}
         ></a>
-        <div id='popup-content'>{popupContent()}</div>
+        <div>
+          <div>{popupContent()}</div>
+          <div>
+            <Button>New waypoint</Button>
+          </div>
+        </div>
       </div>
     </>
   );