From ef13a84185720836bdb0f20764545b9fd465553c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Sun, 13 Mar 2022 10:53:07 +0100
Subject: [PATCH] feat(dashboard-v2): implement CopyButton

---
 .../dashboard-v2/src/components/CopyButton.js | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 packages/dashboard-v2/src/components/CopyButton.js

diff --git a/packages/dashboard-v2/src/components/CopyButton.js b/packages/dashboard-v2/src/components/CopyButton.js
new file mode 100644
index 00000000..db5e9c21
--- /dev/null
+++ b/packages/dashboard-v2/src/components/CopyButton.js
@@ -0,0 +1,50 @@
+import { useCallback, useRef, useState } from "react";
+import copy from "copy-text-to-clipboard";
+import styled from "styled-components";
+import { useClickAway } from "react-use";
+
+import { CopyIcon } from "./Icons";
+
+const Button = styled.button.attrs({
+  className: "relative inline-flex items-center hover:text-primary",
+})``;
+
+const TooltipContainer = styled.div.attrs(({ $visible }) => ({
+  className: `absolute left-full top-1/2 z-10
+              bg-white rounded border border-primary/30 shadow-md
+              pointer-events-none transition-opacity duration-150 ease-in-out
+              ${$visible ? "opacity-100" : "opacity-0"}`,
+}))`
+  transform: translateY(-50%);
+`;
+
+const TooltipContent = styled.div.attrs({
+  className: "bg-primary-light/10 text-palette-600 py-2 px-4 ",
+})``;
+
+export const CopyButton = ({ value }) => {
+  const containerRef = useRef();
+  const [copied, setCopied] = useState(false);
+  const [timer, setTimer] = useState(null);
+
+  const handleCopy = useCallback(() => {
+    clearTimeout(timer);
+    copy(value);
+    setCopied(true);
+
+    setTimer(setTimeout(() => setCopied(false), 150000));
+  }, [value, timer]);
+
+  useClickAway(containerRef, () => setCopied(false));
+
+  return (
+    <div ref={containerRef} className="inline-flex relative overflow-visible pr-2">
+      <Button onClick={handleCopy} className={copied ? "text-primary" : ""}>
+        <CopyIcon size={16} />
+      </Button>
+      <TooltipContainer $visible={copied}>
+        <TooltipContent>Copied to clipboard</TooltipContent>
+      </TooltipContainer>
+    </div>
+  );
+};