refactoring/moving/adding share functionality to a button group on th…

…e map surface.

src/components/share/buildlink.js

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+import { IconButton } from '@mui/joy';
+import ShareRoundedIcon from '@mui/icons-material/ShareRounded';
+
+/**
+ * renders the link builder to recreate the current view elsewhere
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const BuildLink = () => {
+    // get the query string
+    const createLink = () => {
+        alert('A link has been created.');
+    };
+
+    return (
+        <Fragment>
+            <IconButton sx={{ marginLeft: 2 }} onClick={ createLink }>
+                <ShareRoundedIcon color={'primary'} />
+            </IconButton>
+        </Fragment>
+    );
+};

src/components/share/index.js

@@ -1 +1,3 @@
 export * from './share';
+export * from './buildlink';
+export * from './screenshot';

src/components/screenshot/screenshot.js → src/components/share/screenshot.js

@@ -3,11 +3,13 @@ import { IconButton } from '@mui/joy';
 import * as htmlToImage from "html-to-image";
 import AddAPhotoRoundedIcon from '@mui/icons-material/AddAPhotoRounded';
 
-
-
 /**
  * creates a screenshot of the app surface. this method expects a
  * reference to the parent view that will be turned into an image.
+ * usage:
+ *
+ * import { Screenshot } from "@screen-shot/screenshot";
+ *     <Screenshot />
  *
  * @returns {JSX.Element}
  * @constructor
@@ -68,7 +70,7 @@ export const Screenshot = () => {
     return (
         <Fragment>
             <IconButton sx={{ marginLeft: 2 }} onClick={ downloadScreenshot }>
-                <AddAPhotoRoundedIcon />
+                <AddAPhotoRoundedIcon  color={'primary'} />
             </IconButton>
         </Fragment>
     );

src/components/share/share.js

@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { Card, Stack } from '@mui/joy';
+import { BuildLink } from './buildlink';
+import { Screenshot } from './screenshot';
 
 /**
  * renders the shared content on the app as defined in the query string
@@ -8,12 +10,35 @@ import { useSearchParams } from 'react-router-dom';
  * @constructor
  */
 export const Share = () => {
-    // get the query string
-    const [searchParams] = useSearchParams();
-
     return (
         <Fragment>
-            <div>Sharing. params: {JSON.stringify(searchParams.get('test'))}</div>
+            <Card
+                sx={{
+                    p: 0,
+                    position: 'absolute',
+                    top: 'calc(4 * var(--joy-spacing))',
+                    right: 150,
+                    transition: 'filter 250ms',
+                    filter: 'opacity(0.9)',
+                    '&:hover': { filter: 'opacity(1.0)' },
+                    height: 50,
+                    width: 125,
+                    padding: '0px',
+                    zIndex: 999,
+                    borderRadius: 'sm'
+              }}>
+                <Stack
+                    sx={{
+                        p: 0,
+                        m: 0,
+                        height: '100%'}}
+                        direction="row"
+                        //gap={ 1 }
+                    alignItems="center">
+                    <BuildLink />
+                    <Screenshot />
+                </Stack>
+            </Card>
         </Fragment>
     );
 };