refactor: simplify next link component usage

components/copy-button.tsx

@@ -2,20 +2,18 @@
 
 import * as React from "react";
 import copy from "copy-to-clipboard";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CheckIcon, ClipboardCheckIcon, CopyIcon } from "lucide-react";
 import Button from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { toast } from "sonner";
 
 function CopyButton({
   value,
   className,
   variant = "ghost",
-  tooltip = "Copy to Clipboard",
   ...props
 }: React.ComponentProps<typeof Button> & {
   value: string;
-  tooltip?: string;
 }) {
   const [hasCopied, setHasCopied] = React.useState(false);
   const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
@@ -29,8 +27,15 @@ function CopyButton({
   }, []);
 
   const handleCopy = () => {
+    if (hasCopied) return;
+
     copy(value);
     setHasCopied(true);
+    toast.success("Copied!", {
+      icon: <ClipboardCheckIcon className="text-foreground/85 size-4" aria-hidden="true" />,
+      duration: 2000,
+      id: "copy-button-toast-success",
+    });
 
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
@@ -39,26 +44,26 @@ function CopyButton({
   };
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          data-slot="copy-button"
-          data-copied={hasCopied}
-          size="icon"
-          variant={variant}
-          className={cn(
-            "bg-code absolute top-3 right-2 z-10 size-7 hover:opacity-100 focus-visible:opacity-100",
-            className
-          )}
-          onClick={handleCopy}
-          aria-label={hasCopied ? "Copied" : tooltip}
-          {...props}
-        >
-          {hasCopied ? <CheckIcon aria-hidden="true" /> : <CopyIcon aria-hidden="true" />}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>{hasCopied ? "Copied" : tooltip}</TooltipContent>
-    </Tooltip>
+    <Button
+      data-slot="copy-button"
+      data-copied={hasCopied}
+      size="icon"
+      variant={variant}
+      className={cn(
+        "bg-code hover:bg-accent dark:hover:bg-accent absolute top-3 right-2 z-10 size-7.5 hover:opacity-100 focus-visible:opacity-100",
+        hasCopied ? "cursor-default" : "cursor-pointer",
+        className
+      )}
+      onClick={handleCopy}
+      aria-label={hasCopied ? "Copied" : "Copy to clipboard"}
+      {...props}
+    >
+      {hasCopied ? (
+        <CheckIcon className="text-green-600 dark:text-green-400" aria-hidden="true" />
+      ) : (
+        <CopyIcon aria-hidden="true" />
+      )}
+    </Button>
   );
 }