Copy button added

HYP3R00T · Aug 1, 2024 · 957e581 · 957e581
1 parent 0458187
commit 957e581
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/components/core/Copy.tsx b/src/components/core/Copy.tsx
@@ -1,6 +1,4 @@
 import { useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Clipboard } from "lucide-react"; // Import icon from lucide-react
 
 export function Copy() {
   useEffect(() => {
@@ -14,8 +12,17 @@ export function Copy() {
 
         let copyButton = document.createElement("button");
         copyButton.className =
-          "copy-code absolute right-3 -top-3 rounded bg-skin-card px-2 py-1 text-xs leading-4 text-skin-base font-medium";
+          "absolute right-1 top-1 rounded px-2 py-1 text-xs leading-4 focus:outline-none bg-popover opacity-0 transition-opacity duration-300";
         copyButton.innerHTML = copyButtonLabel;
+
+        // Add hover effect to show the button
+        wrapper.addEventListener("mouseenter", () => {
+          copyButton.style.opacity = "1";
+        });
+        wrapper.addEventListener("mouseleave", () => {
+          copyButton.style.opacity = "0";
+        });
+
         codeBlock.setAttribute("tabindex", "0");
         codeBlock.appendChild(copyButton);
 
@@ -37,7 +44,7 @@ export function Copy() {
 
         await navigator.clipboard.writeText(text ?? "");
 
-        // visual feedback that task is completed
+        // Visual feedback that task is completed
         button.innerText = "Copied";
 
         setTimeout(() => {

diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
@@ -2,6 +2,7 @@
 import HeadSEO from "@/components/core/HeadSEO.astro";
 import Header from "@/components/core/Header.astro";
 import Footer from "@/components/core/Footer.astro";
+import { Copy } from "@/components/core/Copy";
 
 import SideNavMenu from "@/components/docs/SideNavMenu.astro";
 import TableofContent from "@/components/docs/TableofContents.astro";
@@ -14,8 +15,6 @@ import { menu, capitalizeFirstLetter } from "@/lib/utils";
 
 import { LOCALE, SITE, docconfig } from "config";
 
-// import { Copy } from "@/components/core/Copy";
-
 const {
   title,
   author,
@@ -43,7 +42,7 @@ const {
   <body
     class=`font-sans ${hide_toc && hide_sidenav && max_width ? "" : "bg-card"}`
   >
-    <!-- <Copy client:only="react" /> -->
+    <Copy client:only="react" />
     <div class="flex flex-col min-h-screen">
       <Header class="border-b bg-background" />
       <main class="flex flex-1 flex-col md:flex-row container">