Copy button

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",

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>
+	);
+};

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 ? (