Web Share API

leonmelein · Sep 14, 2024 · 7bd805e · 7bd805e
1 parent 7cd0da3
commit 7bd805e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/src/Details.css b/src/Details.css
@@ -64,6 +64,35 @@
         margin-bottom: 0;
     }
 
+    button.share {
+        all: unset;
+        width: 100%;
+        border-radius: 1rem;
+        border-width: 1rem;
+        border-color: red;    
+        background-color: var(--button);
+    }
+
+    div.share {
+        display: flex;
+        align-items: center;
+        border-radius: 1rem;
+        border-width: 1rem;
+        border-color: var(--button);
+        width: 100%;
+        margin: 0.5em;
+        margin-left: 1rem;
+
+        svg {
+            margin-right: 1rem;
+        }
+
+        p {
+            display: inline-block;
+            margin: 0;
+        }
+    }
+
 }
 
 .test-results-header {

diff --git a/src/Details.jsx b/src/Details.jsx
@@ -6,12 +6,20 @@ import Map from './Map'
 
 import PropTypes from 'prop-types';
 import Icon from '@mdi/react';
-import { mdiAlert } from '@mdi/js';
+import { mdiAlert, mdiShare } from '@mdi/js';
 import { useLocation } from "react-router-dom";
 
 function Details(){
     const { state } = useLocation();
-    console.log(state.address);
+    const shareData = {
+        title: state.name,
+        text: state.description,
+        url: "https://swim.leonmelein.nl/location/"+state.id,
+    };
+
+    async function share(){
+        await navigator.share(shareData);
+    }
 
     return (
         <>
@@ -26,6 +34,12 @@ function Details(){
                 </div>
                 <div className='location-details container'>
                     <p>{state.description}</p>
+                    <button className='share'>
+                        <div className="share" onClick={share}>
+                            <Icon path={mdiShare} size='2rem' />
+                            <p>Deel deze locatie</p>
+                        </div>
+                    </button>
                 </div>
                 {/* <div className='location-warning'>
                     <Icon path={mdiAlert} size='1.2rem' color='black' />
@@ -58,6 +72,7 @@ function Details(){
 
                     </div>
                 </div>
+
                 <div className='location-details container'>
                     <h3>Locatie</h3>
                     <p>{state.address}</p>