feat: add copy email to clipboard

zhangchi0104 · Jan 24, 2024 · 5d62e9b · 5d62e9b
1 parent 95224ca
commit 5d62e9b
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 20 deletions.
diff --git a/src/components/Home/IntroText.tsx b/src/components/Home/IntroText.tsx
@@ -1,9 +1,29 @@
-import React from "react";
+import React, { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { EnvelopeIcon } from "@heroicons/react/24/solid";
 
 const IntroText: React.FC = () => {
   const { t } = useTranslation();
+  const copyEmail = () => {
+    navigator.clipboard.writeText(t("home.email")).then(() => {
+      setCopied(true);
+    });
+  };
+
+  const [copied, setCopied] = React.useState(false);
+  const animation = useMemo(
+    () => (copied ? "animate-fade-bounce-in" : "scale-0 opacity-0"),
+    [copied]
+  );
+  useEffect(() => {
+    if (copied) {
+      const timeoutId = setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [copied]);
+
   return (
     <>
       <div className="flex flex-col justify-center h-full text-gray-500 dark:text-slate-400">
@@ -12,11 +32,19 @@ const IntroText: React.FC = () => {
         </h2>
         <p className="text-md md:text-xl  mt-1">{t("home.subheading1")}</p>
         <p className="text-md md:text-xl">{t("home.subheading2")}</p>
-        <p className="text-xs md:text-sm flex items-center mt-1 justify-center md:justify-start">
-          <span className="mr-1">
-            <EnvelopeIcon className="h-6 w-6" />
-          </span>
-          {t("home.email")}
+        <p className="text-xs md:text-sm mt-2 flex flex-col md:flex-row items-center">
+          <div onClick={copyEmail} className="">
+            <span className="mr-1">
+              <EnvelopeIcon className="h-6 w-6 inline" />
+            </span>
+            {t("home.email")}
+          </div>
+
+          <p
+            className={`${animation} md:ml-2 mt-2 md:mt-0 rounded-full bg-teal-700 text-gray-50 dark:text-slate-300 dark:bg-slate-600 px-4 py-0.5`}
+          >
+            {t("home.copied")}
+          </p>
         </p>
       </div>
     </>

diff --git a/src/components/NavBar/Settings/AppearanceMenu.tsx b/src/components/NavBar/Settings/AppearanceMenu.tsx
@@ -1,17 +1,18 @@
 import { useAppDispatch, useAppSelector } from "@/hooks";
 import { selectAppearance } from "@/store/selectors";
 
-import React from "react";
+import React, { useTransition } from "react";
 import {
   SunIcon,
   MoonIcon,
   ComputerDesktopIcon
 } from "@heroicons/react/24/outline";
 import { setAppearance } from "@/store/actions";
+import { useTranslation } from "react-i18next";
 const AppearanceMenu: React.FC = () => {
   const appearance = useAppSelector(selectAppearance);
   const dispatch = useAppDispatch();
-
+  const { t } = useTranslation();
   const onListItemClick = (newAppearance: "light" | "dark" | "system") => {
     dispatch(setAppearance(newAppearance));
   };
@@ -28,7 +29,7 @@ const AppearanceMenu: React.FC = () => {
         <span className="mr-2 text-sm">
           <SunIcon className="h-5 w-5" />
         </span>
-        Light
+        {t("navbar.settings.lightMode")}
       </li>
       <li
         className={`${
@@ -41,7 +42,7 @@ const AppearanceMenu: React.FC = () => {
         <span className="mr-2 text-sm">
           <MoonIcon className="h-5 w-5" />
         </span>
-        Dark
+        {t("navbar.settings.darkMode")}
       </li>
       <li
         className={`${
@@ -54,7 +55,7 @@ const AppearanceMenu: React.FC = () => {
         <span className="mr-2 text-sm">
           <ComputerDesktopIcon className="h-5 w-5" />
         </span>
-        System
+        {t("navbar.settings.followSystem")}
       </li>
     </ul>
   );

diff --git a/src/components/NavBar/Settings/FancyModeToggle.tsx b/src/components/NavBar/Settings/FancyModeToggle.tsx
@@ -2,16 +2,18 @@ import ToggleSwitch from "@/components/ToggleSwtich";
 import { useAppDispatch, useAppSelector } from "@/hooks";
 import { toggleFancyMode } from "@/store/actions";
 import { selectFancyModeEnabled } from "@/store/selectors";
+import { useTranslation } from "react-i18next";
 
 const FancyModeToggle = () => {
   const fancyModeEnabled = useAppSelector(selectFancyModeEnabled);
   const dispatch = useAppDispatch();
   const switchFancyMode = () => {
     dispatch(toggleFancyMode());
   };
+  const { t } = useTranslation();
   return (
     <div className="flex justify-between items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600">
-      <p>Fancy Mode</p>
+      <p>{t("navbar.settings.fancyMode")}</p>
       <ToggleSwitch
         checked={fancyModeEnabled}
         onClick={() => switchFancyMode()}

diff --git a/src/langs/en/translations.json b/src/langs/en/translations.json
@@ -4,13 +4,20 @@
     "home": "Home",
     "aboutMe": "About Me",
     "projects": "Projects",
-    "name": "Alex Zhang"
+    "name": "Alex Zhang",
+    "settings": {
+      "darkMode": "Dark",
+      "lightMode": "Light",
+      "fancyMode": "Fancy Mode",
+      "followSystem": "System"
+    }
   },
   "home": {
     "heading": "👋🏻G'Day! I'm Alex.",
     "subheading1": "Master of IT (University of Melbourne)",
     "subheading2": "Web Developer (React)",
-    "email": "[email protected]"
+    "email": "[email protected]",
+    "copied": "Copied!"
   },
   "aboutMe": {
     "education": {

diff --git a/src/langs/zh/translations.json b/src/langs/zh/translations.json
@@ -2,7 +2,13 @@
   "navbar": {
     "home": "首页",
     "aboutMe": "关于我",
-    "projects": "项目经历"
+    "projects": "项目经历",
+    "settings": {
+      "darkMode": "深色模式",
+      "lightMode": "浅色模式",
+      "followSystem": "跟随系统",
+      "fancyMode": "背景动画"
+    }
   },
   "home": {
     "heading": "嗨👋🏻! 我是 Alex",
@@ -14,7 +20,8 @@
         "hint": "单击复制",
         "toast": "已复制"
       }
-    }
+    },
+    "copied": "已复制!"
   },
   "aboutMe": {
     "education": {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,10 +5,11 @@ module.exports = {
     extend: {
       animation: {
         "fade-in": "fade-in 0.3s cubic-bezier(0.4, 0, 1, 1)",
-        "fade-bounce-in": "fade-bounce-in 0.3s cubic-bezier(0.4, 0, 1, 1)",
+        "fade-bounce-in": "fade-bounce-in 0.2s cubic-bezier(0.4, 0, 1, 1)",
         "bounce-emphasis": "bounce-emphasis 0.3s cubic-bezier(0.4, 0, 1, 1)",
         "bounce-in-x": "bounce-in-x 1.5s ease-in-out 0.3s",
-        "spin-bounce": "spin-bounce 0.3s linear"
+        "spin-bounce": "spin-bounce 0.3s linear",
+        "fade-out": "fade-out 0.3s linear 0.3s"
       },
       keyframes: {
         "fade-in": {
@@ -72,6 +73,14 @@ module.exports = {
           "100%": {
             transform: "translateY(0) rotate(180deg)"
           }
+        },
+        "fade-out": {
+          "0%": {
+            opacity: "1"
+          },
+          "100%": {
+            opacity: "0"
+          }
         }
       }
     }

diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,8 +1,6 @@
 const common = require("./webpack.common.js");
 const { merge } = require("webpack-merge");
 const TerserPlugin = require("terser-webpack-plugin");
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const opts = {
   mode: "production",