From 5dd74e4b3fdc9a06d6f0c7105f75423d3aeaf46f Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Tue, 11 Jun 2024 20:58:45 +0900
Subject: [PATCH] feat(react): add Tooltip to App.tsx

This commit includes the addition of the Tooltip component to the App.tsx in the react package. With this feature, application elements now display messages based on their status (success or error) upon interaction, enhancing the user experience. Additionally, a copy-to-clipboard functionality has been implemented.
---
 packages/react/src/App.tsx | 67 +++++++++++++++++++++++++++++++-------
 1 file changed, 55 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index 1717166..b559bda 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -29,7 +29,9 @@ import React, {
   useContext,
   useEffect,
   useRef,
+  useState,
 } from "react";
+import { Tooltip, TooltipContent } from "@components/Tooltip.tsx";
 
 function buildThresholdList() {
   const thresholds: number[] = [];
@@ -49,6 +51,8 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
     const internalRef = useRef<HTMLHeadingElement | null>(null);
     const [_, setActiveHeadings] = useContext(HeadingContext);
 
+    const { children, ...restProp } = prop;
+
     useEffect(() => {
       const observer = new IntersectionObserver(
         ([{ target, intersectionRatio }]) => {
@@ -72,19 +76,58 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
       };
     }, [internalRef.current]);
 
+    const [status, setStatus] = useState<"normal" | "error" | "success">(
+      "normal",
+    );
+    const messages = {
+      normal: "Click to copy link",
+      success: "Copied link!",
+      error: "Failed to copy..",
+    };
+
+    useEffect(() => {
+      if (status !== "normal") {
+        const timeout = setTimeout(() => {
+          setStatus("normal");
+        }, 3000);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
+    }, [status]);
+
     return (
-      <Level
-        {...prop}
-        className={`${prop.className}`}
-        ref={(el) => {
-          internalRef.current = el;
-          if (typeof ref === "function") {
-            ref(el);
-          } else if (el && ref) {
-            ref.current = el;
-          }
-        }}
-      />
+      <Tooltip asChild position={"right"}>
+        <Level
+          ref={(el) => {
+            internalRef.current = el;
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (el && ref) {
+              ref.current = el;
+            }
+          }}
+          className={`${prop.className} cursor-pointer select-none`}
+          onClick={async (e) => {
+            try {
+              await navigator.clipboard.writeText(
+                window.location.href.split("#")[0] + "#" + e.currentTarget.id,
+              );
+              setStatus("success");
+            } catch (e) {
+              setStatus("error");
+            }
+          }}
+          {...restProp}
+        >
+          {children}
+          <TooltipContent status={status} offset={"lg"} delay={"early"}>
+            <p className={"text-base font-normal whitespace-nowrap not-prose"}>
+              {messages[status]}
+            </p>
+          </TooltipContent>
+        </Level>
+      </Tooltip>
     );
   };
 }