1 files changed, 37 insertions, 0 deletions
diff --git a/apps/web/components/ui/copy-button.tsx b/apps/web/components/ui/copy-button.tsx
new file mode 100644
index 00000000..a51ce902
--- /dev/null
+++ b/apps/web/components/ui/copy-button.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { Check, Copy } from "lucide-react";
+
+export default function CopyBtn({
+  className,
+  getStringToCopy,
+}: {
+  className?: string;
+  getStringToCopy: () => string;
+}) {
+  const [copyOk, setCopyOk] = React.useState(false);
+  const [disabled, setDisabled] = React.useState(false);
+  useEffect(() => {
+    if (!navigator || !navigator.clipboard) {
+      setDisabled(true);
+    }
+  });
+
+  const handleClick = async () => {
+    await navigator.clipboard.writeText(getStringToCopy());
+    setCopyOk(true);
+    setTimeout(() => {
+      setCopyOk(false);
+    }, 2000);
+  };
+
+  return (
+    <button
+      className={className}
+      onClick={handleClick}
+      disabled={disabled}
+      title={disabled ? "Copying is only available over https" : undefined}
+    >
+      {copyOk ? <Check /> : <Copy />}
+    </button>
+  );
+}