outline of share button function UI

components/Pause.tsx

@@ -22,9 +22,9 @@ export default function Pause({
 
   var classNameCondition = ""
   if (paused) {
-    classNameCondition="animate-pulse fixed z-90 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
+    classNameCondition="animate-pulse fixed z-90 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
   } else {
-    classNameCondition="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+    classNameCondition="fixed z-90 top-48 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
   }
 
   return (

components/Share.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { FiShare } from "react-icons/fi";
+
+export default function Info() {
+    const [open, setOpen] = useState(false);
+
+    var classNameCondition = ""
+    if (open) {
+        classNameCondition = "fixed z-90 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+    } else {
+        classNameCondition = "fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+    }
+
+    // function that copies the current url to the clipboard and alerts the user
+    function copyToClipboard() {
+        var copyText = window.location.href
+        navigator.clipboard.writeText(copyText);
+    }
+
+    return (
+        <>
+            <button
+                title="Info"
+                data-tooltip-target="tooltip-click" 
+                data-tooltip-trigger="click"
+                className={classNameCondition}
+                onClick={() => {
+                    copyToClipboard()
+                }}
+            >
+                <FiShare />
+            </button>
+        </>
+    );
+};

pages/index.tsx

@@ -5,6 +5,7 @@ import * as Tone from "tone";
 import AudioPlayer from "../components/AudioPlayer";
 import PageHead from "../components/PageHead";
 import Info from "../components/Info";
+import Share from "../components/Share";
 import ModelInference from "../components/ModelInference";
 import Pause from "../components/Pause";
 import PromptPanel from "../components/PromptPanel";
@@ -230,6 +231,8 @@ export default function Home() {
 
         <Info />
 
+        <Share />
+
         <Pause paused={paused} setPaused={setPaused} />
       </div>
     </>