Make it possible to copy the email to the clipboard

Author: sergioalvz

components/Email/index.tsx

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from "react";
+import { FaRegCopy } from "react-icons/fa";
+import { Tooltip } from "react-tooltip";
+
+type EmailProps = {
+  children: string;
+  onCopyTooltip: string;
+};
+
+export function Email({ children, onCopyTooltip }: EmailProps) {
+  const [copied, setCopied] = useState(false);
+  const [id, setId] = useState("");
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(children);
+
+    setCopied(true);
+  }, [children]);
+
+  useEffect(() => {
+    if (!copied) return;
+
+    const timeout = setTimeout(() => setCopied(false), 2000);
+
+    return () => clearTimeout(timeout);
+  }, [copied]);
+
+  useEffect(() => {
+    setId(Math.random().toString(36).substring(7));
+  }, []);
+
+  return (
+    <button className="Email" onClick={handleCopy} id={id}>
+      {children}
+
+      <span className="Email__Icon">
+        <FaRegCopy />
+      </span>
+
+      <Tooltip anchorId={id} isOpen={copied} place="bottom" className="Email__Tooltip">
+        {onCopyTooltip}
+      </Tooltip>
+    </button>
+  );
+}

components/Email/style.css

@@ -0,0 +1,35 @@
+.Email {
+  align-items: baseline;
+  border: 1px dashed var(--gray7);
+  display: inline-flex;
+  font-size: 1em;
+  padding: 0 0.15rem;
+
+  color: var(--gray11);
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: 0.25rem;
+  font-family: inherit;
+  font-weight: 700;
+
+  appearance: none;
+
+  transition: border-color 250ms ease-in-out, color 250ms ease-in-out;
+}
+
+.Email:hover {
+  border-color: var(--gray8);
+  color: var(--gray12);
+}
+
+.Email__Icon {
+  font-size: 0.65em;
+  margin-left: 0.25rem;
+}
+
+.Email .Email__Tooltip {
+  font-size: 0.65em;
+
+  background-color: var(--gray3);
+  color: var(--gray12);
+}

package.json

@@ -11,6 +11,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "4.4.0",
+    "react-tooltip": "5.7.4",
     "yup": "0.32.11"
   },
   "devDependencies": {

pages/en/index.tsx

@@ -1,4 +1,5 @@
 import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
+import { Email } from "../../components/Email";
 import { Figure } from "../../components/Figure";
 import { Link } from "../../components/Link";
 import { List } from "../../components/List";
@@ -138,7 +139,8 @@ export default function Homepage() {
 
           <Page.Text>
             Would you like to hire this technical training? Please drop me a line at{" "}
-            <strong>hola@codecoolture.com</strong> and tell me about your team and the projects you are working on!
+            <Email onCopyTooltip="Email copied to clipboard">hola@codecoolture.com</Email> and tell me about your team
+            and the projects you are working on!
           </Page.Text>
 
           <Page.Subheading>Published material</Page.Subheading>

pages/es/index.tsx

@@ -1,4 +1,5 @@
 import { FaGithub, FaLink, FaTwitter } from "react-icons/fa";
+import { Email } from "../../components/Email";
 import { Figure } from "../../components/Figure";
 import { Link } from "../../components/Link";
 import { List } from "../../components/List";
@@ -144,8 +145,8 @@ export default function Homepage() {
 
           <Page.Text>
             Si quieres contratar esta formación para tu empresa, escríbeme un mensaje a{" "}
-            <strong>hola@codecoolture.com</strong> y cuéntame un poco sobre tu equipo y los proyectos en los que estáis
-            trabajando.
+            <Email onCopyTooltip="Email copiado al portapapeles">hola@codecoolture.com</Email> y cuéntame un poco sobre
+            tu equipo y los proyectos en los que estáis trabajando.
           </Page.Text>
 
           <Page.Subheading>Material publicado</Page.Subheading>

styles/index.css

@@ -1,3 +1,5 @@
+@import "react-tooltip/dist/react-tooltip.css";
+
 @import "@radix-ui/colors/grayDark.css";
 @import "@radix-ui/colors/indigoDark.css";
 @import "@radix-ui/colors/redDark.css";
@@ -7,6 +9,7 @@
 @import "../components/Button/style.css";
 @import "../components/Blockquote/style.css";
 @import "../components/Code/style.css";
+@import "../components/Email/style.css";
 @import "../components/Figure/style.css";
 @import "../components/Link/style.css";
 @import "../components/List/style.css";

yarn.lock

@@ -556,6 +556,18 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.0.tgz#ae7ae7923d41f3d84cb2fd88740a89436610bbec"
+  integrity sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA==
+
+"@floating-ui/dom@^1.0.4":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.0.tgz#a60212069cc58961c478037c30eba4b191c75316"
+  integrity sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==
+  dependencies:
+    "@floating-ui/core" "^1.2.0"
+
 "@hapi/hoek@^9.0.0":
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17"
@@ -1584,6 +1596,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -3889,6 +3906,14 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-tooltip@5.7.4:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.7.4.tgz#246269b89f55de031e3c964125443e41d3799500"
+  integrity sha512-Eocnm5Dl6numT52CXLVecX5p93W4ifU3TIbhGqrNfFw2KY7ES2tZDPQHH5yQ1OSWhAcxWZImuFRcUwe+W/vTig==
+  dependencies:
+    "@floating-ui/dom" "^1.0.4"
+    classnames "^2.3.2"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"