Share link button

www/app/transcripts/[transcriptId]/page.tsx

@@ -10,6 +10,7 @@ import { Topic } from "../webSocketTypes";
 import React, { useEffect, useState } from "react";
 import "../../styles/button.css";
 import FinalSummary from "../finalSummary";
+import ShareLink from "../shareLink";
 
 type TranscriptDetails = {
   params: {
@@ -55,6 +56,8 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               autoscroll={false}
             />
             <section className="relative w-full h-auto max-h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
+              <ShareLink />
+
               <div className="py-2 h-full">
                 {transcript?.response?.longSummary && (
                   <FinalSummary text={transcript?.response?.longSummary} />

www/app/transcripts/shareLink.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useRef } from "react";
+
+const ShareLink = () => {
+  const [isCopied, setIsCopied] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const currentURL = window.location.href;
+
+  const handleCopyClick = () => {
+    if (inputRef.current) {
+      inputRef.current.select();
+      document.execCommand("copy");
+      setIsCopied(true);
+
+      // Reset the copied state after 2 seconds
+      setTimeout(() => setIsCopied(false), 2000);
+    }
+  };
+
+  return (
+    <div
+      className="p-4 mt-4 rounded"
+      style={{ background: "rgba(96, 165, 250, 0.2)" }}
+    >
+      <p className="text-sm mb-2">
+        You can share this link with others. Anyone with the link will have
+        access to the page, including the full audio recording, for the next 10
+        days.
+      </p>
+      <div className="flex items-center">
+        <input
+          type="text"
+          readOnly
+          value={currentURL}
+          ref={inputRef}
+          className="border rounded p-2 flex-grow mr-2 text-sm bg-slate-100 outline-slate-400"
+        />
+        <button
+          onClick={handleCopyClick}
+          className={
+            (isCopied ? "bg-blue-500" : "bg-blue-400") +
+            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
+          }
+        >
+          {isCopied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ShareLink;