Add: Click to copy button

src/components/CopyBtn.tsx

@@ -0,0 +1,44 @@
+import { ReactNode, useState } from "react";
+import { Tooltip } from "react-daisyui";
+
+export default function CopyTootrip({
+    children,
+    copyText,
+    className,
+}: {
+    children: ReactNode;
+    copyText: string;
+    className?: string;
+}) {
+    const defaultMsg = "クリックしてコピー";
+    const [tooltipMsg, setTooltipMsg] = useState(defaultMsg);
+
+    const handleClick = (/*e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>*/) => {
+        navigator.clipboard.writeText(copyText);
+        setTooltipMsg("コピーしました");
+    };
+
+    const handleMouseOut = () => {
+        setTooltipMsg(defaultMsg);
+    };
+
+    const handleMouseOver = (/*e: React.MouseEvent<HTMLDivElement, MouseEvent>*/) => {
+        setTimeout(() => {
+            setTooltipMsg(defaultMsg);
+        }, 2000);
+    };
+
+    return (
+        <>
+            <Tooltip
+                message={tooltipMsg}
+                onClick={handleClick}
+                onMouseOut={handleMouseOut}
+                onMouseOver={handleMouseOver}
+                className={className}
+            >
+                {children}
+            </Tooltip>
+        </>
+    );
+}

src/options/pages/Top.tsx

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { useEffect, useState } from "react";
 
 import { StorageTool } from "../../class/StorageTool";
+import CopyTootrip from "../../components/CopyBtn";
 import Heading from "../../components/Heading";
 import { Switches } from "../../components/Switches";
 import IsTrue from "../../utils/isTrue";
@@ -27,9 +28,9 @@ export default function Top() {
 
             <ConfigSection name="群馬大学学務課・メディアセンターの方へ">
                 <p>このソフトウェアについて問題がある場合は以下のメールアドレスまでご連絡ください。</p>
-                <a href="mailto:[email protected]" className="btn btn-neutral my-5">
-                    [email protected]
-                </a>
+                <CopyTootrip copyText="[email protected]" className="my-5">
+                    <button className="btn btn-neutral">[email protected]</button>
+                </CopyTootrip>
             </ConfigSection>
         </>
     );

src/utils/addClass.ts

@@ -4,9 +4,9 @@ export function addClass(elements: Elements[], classNames: string[]) {
     elements.forEach((element) => {
         if (typeof element === "string") {
             const elements = document.querySelectorAll(element);
-            elements.forEach((element) => {
-                //console.log("adding classes to", element);
-                element.classList.add(...classNames);
+            elements.forEach((e) => {
+                console.log(`adding classes (${classNames}) to`, e);
+                e.classList.add(...classNames);
             });
         } else {
             let list: HTMLElement[];