From 9a81c7ab046f656c2d876ceb2f00b41e1fbf1994 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Mon, 27 Jan 2025 14:16:15 -0600
Subject: [PATCH] Copy button

---
 package.json                                  |  2 +-
 src/components/CopyButton.tsx                 | 48 +++++++++++++++++++
 .../features/invites/InviteCodes.tsx          |  6 ++-
 3 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 src/components/CopyButton.tsx

diff --git a/package.json b/package.json
index faf5bee..d607e77 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pdsmanager",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
new file mode 100644
index 0000000..5b1dabb
--- /dev/null
+++ b/src/components/CopyButton.tsx
@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+export const CopyButton = ({ text }: { text: string }) => {
+	const [copied, setCopied] = useState(false);
+
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2000);
+		} catch (err) {
+			console.error("Failed to copy text:", err);
+		}
+	};
+
+	return (
+		<button
+			onClick={handleCopy}
+			className="btn btn-sm btn-ghost"
+			title="Copy to clipboard"
+		>
+			{copied ? (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					className="h-4 w-4"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fillRule="evenodd"
+						d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+						clipRule="evenodd"
+					/>
+				</svg>
+			) : (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					className="h-4 w-4"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+					<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+				</svg>
+			)}
+		</button>
+	);
+};
diff --git a/src/components/features/invites/InviteCodes.tsx b/src/components/features/invites/InviteCodes.tsx
index ac1e1ab..bf70748 100644
--- a/src/components/features/invites/InviteCodes.tsx
+++ b/src/components/features/invites/InviteCodes.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { Settings } from "../../../lib/settings";
 import { useRefresh } from "../../../lib/RefreshContext";
+import { CopyButton } from "../../CopyButton"
 
 interface InviteCodeUse {
   usedBy: string;
@@ -251,8 +252,9 @@ export default function InviteCodes() {
               >
                 <div className="card-body p-3 sm:p-6">
                   <div className="flex flex-col sm:flex-row justify-between items-start gap-4">
-                    <div className="font-mono text-base sm:text-lg bg-base-100 p-2 sm:p-3 rounded-box select-all w-full sm:flex-1 break-all">
-                      {code.code}
+                    <div className="flex items-center gap-2 font-mono text-base sm:text-lg bg-base-100 p-2 sm:p-3 rounded-box w-full sm:flex-1 break-all">
+                      <span className="flex-1">{code.code}</span>
+                      <CopyButton text={code.code} />
                     </div>
                     <div className="flex flex-row sm:flex-col items-center sm:items-end gap-2 w-full sm:w-auto">
                       {code.disabled ? (