SUM-260: adding a tooltip

SU-SWS · Dec 18, 2024 · 37d6c01 · 37d6c01
1 parent 3fb0bca
commit 37d6c01
Showing 1 changed file with 40 additions and 16 deletions.
diff --git a/src/components/elements/favorites-list.tsx b/src/components/elements/favorites-list.tsx
@@ -7,6 +7,7 @@ import {XMarkIcon} from "@heroicons/react/20/solid"
 import {H2} from "./headers"
 import {clsx} from "clsx"
 import {twMerge} from "tailwind-merge"
+import {useState} from "react"
 
 const ShareButtons = () => {
   const [, copy] = useCopyToClipboard()
@@ -19,6 +20,42 @@ const ShareButtons = () => {
     copy(text).catch(_e => console.warn("An error occurred when copying to clipboard"))
   }
 
+  function clipCopiedText() {
+    const [isActive, setIsActive] = useState(false)
+
+    return (
+      <>
+        <button
+          className="text-center font-semibold hocus:underline"
+          onClick={ev => {
+            copyToClip(copyUrl)
+            setIsActive(!isActive)
+          }}
+          data-course-shared="Favorites"
+          disabled={!favs.length}
+        >
+          <ClipboardDocumentIcon
+            width={30}
+            className={twMerge(
+              "mb-4 block w-full rounded-full bg-spirited-dark p-5 text-white",
+              clsx({"bg-black-40": !favs.length})
+            )}
+          />
+          Copy
+        </button>
+        {/* className={"list-unstyled " + (isActive ? "" : "tw-hidden")} */}
+        <div
+          className={twMerge(
+            "r-4 absolute bottom-0 right-0 w-20 bg-black p-3 text-base text-white",
+            clsx({"tw-hidden": !isActive})
+          )}
+        >
+          Copied!
+        </div>
+      </>
+    )
+  }
+
   const smsCopy =
     "sms:?body=" +
     encodeURIComponent(
@@ -33,7 +70,7 @@ const ShareButtons = () => {
     )
 
   return (
-    <div className="mt-12 flex flex-row justify-between gap-5 *:max-w-60 *:flex-1 *:shrink-0 @md:gap-20">
+    <div className="relative mt-12 flex flex-row justify-between gap-5 *:max-w-60 *:flex-1 *:shrink-0 @md:gap-20">
       <button
         className="text-center font-semibold text-archway-dark no-underline hocus:underline"
         onClick={() => (location.href = smsCopy)}
@@ -64,21 +101,8 @@ const ShareButtons = () => {
         />
         Email
       </button>
-      <button
-        className="text-center font-semibold hocus:underline"
-        onClick={() => copyToClip(copyUrl)}
-        data-course-shared="Favorites"
-        disabled={!favs.length}
-      >
-        <ClipboardDocumentIcon
-          width={30}
-          className={twMerge(
-            "mb-4 block w-full rounded-full bg-spirited-dark p-5 text-white",
-            clsx({"bg-black-40": !favs.length})
-          )}
-        />
-        Copy
-      </button>
+
+      {clipCopiedText()}
     </div>
   )
 }