fix: make displayText optional in CopyButton component

Author: ErwanDecoster

src/components/CopyButton.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import { Copy } from 'lucide-react';
 import { useState } from 'react';
 import {
@@ -12,7 +13,7 @@ const CopyButton = ({
   displayText,
 }: {
   textToCopy: string;
-  displayText: string;
+  displayText?: string;
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
   const [tooltipMessage, setTooltipMessage] = useState('Copy');
@@ -45,11 +46,16 @@ const CopyButton = ({
             }}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
-            className="hover:before:bg-grey-700 active:before:bg-grey-600 relative z-0 -mx-2 -my-1 flex w-fit items-center gap-1 px-2 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-150 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
+            className={cn(
+              'hover:before:bg-grey-700 active:before:bg-grey-600 relative z-0 -my-1 flex w-fit items-center gap-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-150 active:before:scale-x-[0.98] active:before:scale-y-[0.94]',
+              displayText ? '-mx-2 px-2' : '-mx-1 px-1'
+            )}
           >
-            <span className="overflow-hidden overflow-ellipsis">
-              {displayText}
-            </span>
+            {displayText && (
+              <span className="overflow-hidden overflow-ellipsis">
+                {displayText}
+              </span>
+            )}
             <Copy className="size-4 flex-none" />
           </button>
         </TooltipTrigger>