bug fixed + optimizations

components/CopyButton.tsx

@@ -1,34 +1,30 @@
-import React from "react";
+import React, { useState } from "react";
 
 type Props = {
   text: string;
 };
 
-const CopyButton = ({ text }: Props) => {
+const CopyButton: React.FC<Props> = ({ text }) => {
-  return (
+  const [copied, setCopied] = useState(false);
-    <div
+
-      className="bi-copy text-xl text-neutral btn btn-sm btn-square btn-ghost"
+  const handleCopy = async () => {
-      onClick={() => {
     try {
-          navigator.clipboard.writeText(text).then(() => {
+      await navigator.clipboard.writeText(text);
-            const copyIcon = document.querySelector(".bi-copy");
+      setCopied(true);
-            if (copyIcon) {
-              copyIcon.classList.remove("bi-copy");
-              copyIcon.classList.add("bi-check2");
-              copyIcon.classList.add("text-success");
-            }
       setTimeout(() => {
-              if (copyIcon) {
+        setCopied(false);
-                copyIcon.classList.remove("bi-check2");
-                copyIcon.classList.remove("text-success");
-                copyIcon.classList.add("bi-copy");
-              }
       }, 1000);
-          });
     } catch (err) {
       console.log(err);
     }
-      }}
+  };
+
+  return (
+    <div
+      className={`text-xl text-neutral btn btn-sm btn-square btn-ghost ${
+        copied ? "bi-check2 text-success" : "bi-copy"
+      }`}
+      onClick={handleCopy}
     ></div>
   );
 };

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -17,11 +17,10 @@ import usePinLink from "@/lib/client/pinLink";
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
-  className?: string;
   btnStyle?: string;
 };
 
-export default function LinkActions({ link, className, btnStyle }: Props) {
+export default function LinkActions({ link, btnStyle }: Props) {
   const { t } = useTranslation();
 
   const permissions = usePermissions(link.collection.id as number);
@@ -60,9 +59,7 @@ export default function LinkActions({ link, className, btnStyle }: Props) {
     <>
       {isPublicRoute ? (
         <div
-          className={clsx(className || "top-3 right-3 absolute z-20")}
+          className="absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-          tabIndex={0}
-          role="button"
           onMouseDown={dropdownTriggerer}
           onClick={() => setLinkModal(true)}
         >
@@ -72,9 +69,7 @@ export default function LinkActions({ link, className, btnStyle }: Props) {
         </div>
       ) : (
         <div
-          className={`dropdown dropdown-end absolute ${
+          className={`dropdown dropdown-end absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100 z-20`}
-            className || "top-3 right-3"
-          } z-20`}
         >
           <div
             tabIndex={0}

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -232,17 +232,8 @@ export default function LinkCard({ link, columns, editMode }: Props) {
 
       {/* Overlay on hover */}
       <div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
-      <LinkActions
+      <LinkActions link={link} collection={collection} />
-        link={link}
+      <LinkPin link={link} />
-        collection={collection}
-        className={
-          "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-        }
-      />
-      <LinkPin
-        link={link}
-        className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-      />
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkList.tsx

@@ -135,19 +135,8 @@ export default function LinkCardCompact({ link, editMode }: Props) {
             </div>
           </div>
         </div>
-        <LinkPin
+        <LinkPin link={link} btnStyle="btn-ghost" />
-          link={link}
+        <LinkActions link={link} collection={collection} btnStyle="btn-ghost" />
-          className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-          btnStyle="btn-ghost"
-        />
-        <LinkActions
-          link={link}
-          collection={collection}
-          className={
-            "absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-          }
-          btnStyle="btn-ghost"
-        />
       </div>
       <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
     </>

components/LinkViews/LinkComponents/LinkMasonry.tsx

@@ -240,17 +240,8 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
 
       {/* Overlay on hover */}
       <div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
-      <LinkActions
+      <LinkActions link={link} collection={collection} />
-        link={link}
+      <LinkPin link={link} />
-        collection={collection}
-        className={
-          "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-        }
-      />
-      <LinkPin
-        link={link}
-        className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-      />
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkPin.tsx

@@ -5,11 +5,10 @@ import usePinLink from "@/lib/client/pinLink";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
-  className?: string;
   btnStyle?: string;
 };
 
-export default function LinkPin({ link, className, btnStyle }: Props) {
+export default function LinkPin({ link, btnStyle }: Props) {
   const pinLink = usePinLink();
   const router = useRouter();
 
@@ -18,7 +17,7 @@ export default function LinkPin({ link, className, btnStyle }: Props) {
 
   return (
     <div
-      className={clsx(className || "top-3 right-3 absolute")}
+      className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
       onClick={() => pinLink(link)}
     >
       <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>