add share button

Author: kleinlennart

TODO.md

@@ -4,4 +4,3 @@
 - find edge cases
 - styling
 - search
-- share button

app/Header.tsx

@@ -1,5 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
+import { Suspense } from "react";
+import { ShareButton } from "./ShareButton";
 
 export function Header() {
   return (
@@ -34,6 +36,10 @@ export function Header() {
             d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
           />
         </svg>
+
+        <Suspense>
+          <ShareButton />
+        </Suspense>
       </div>
     </header>
   );

app/ShareButton.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
+
+export function ShareButton() {
+  const searchParams = useSearchParams();
+  const [copied, setCopied] = useState(false);
+
+  const isVisible = searchParams.get("symbol1") && searchParams.get("symbol2");
+  if (!isVisible) return null;
+
+  const handleShare = async () => {
+    await navigator.clipboard.writeText(window.location.href);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      onClick={handleShare}
+      className={`ml-auto flex items-center gap-2 rounded-md bg-un-blue px-3 py-1.5 text-sm font-medium text-white transition-all ${copied ? "cursor-default" : "hover:opacity-80"}`}
+    >
+      {copied ? (
+        <>
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+          Link Copied!
+        </>
+      ) : (
+        <>
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+            />
+          </svg>
+          Share
+        </>
+      )}
+    </button>
+  );
+}

app/page.tsx

@@ -24,6 +24,13 @@ function HomeContent() {
   const [diffData, setDiffData] = useState<DiffResponse | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleShare = async () => {
+    await navigator.clipboard.writeText(window.location.href);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
 
   const fetchDiff = async (sym1?: string, sym2?: string) => {
     const symbolA = sym1 || symbol1;