From 90a4bce926a8abf1d912d590b0043b8a090fc0d1 Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Tue, 13 May 2025 21:45:46 +0100
Subject: [PATCH] Update code component

---
 components/ui/Code.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/ui/Code.tsx b/components/ui/Code.tsx
index 8ca02b8..d17060b 100644
--- a/components/ui/Code.tsx
+++ b/components/ui/Code.tsx
@@ -8,19 +8,22 @@ import clsx from 'clsx'
 export function Code({children}: { children: ReactNode }) {
     const [copied, setCopied] = useState<boolean>(false)
     const preRef = useRef<HTMLPreElement>(null)
+    const buttonRef = useRef<HTMLButtonElement>(null)
 
     const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault()
         await navigator.clipboard.writeText(preRef.current?.innerText ?? '')
         setCopied(true)
         setTimeout(() => setCopied(false), 1000)
+        buttonRef.current?.blur()
     }
 
     return (
         <pre className="relative group" ref={preRef}>
                 <button
-                    className="absolute top-0 right-0 m-5 text-zinc-400 hover:text-zinc-50 focus:text-zinc-50 active:text-zinc-50"
-                    onClick={handleCopy} aria-label="Copy code">
+                    className="absolute top-0 right-0 m-5 text-zinc-400 hover:text-zinc-50"
+                    onClick={handleCopy} aria-label={`${!copied ? 'Copy this code' : 'Copied!'}`}
+                    ref={buttonRef}>
                     <div className="relative size-6">
                         <CheckIcon
                             className={clsx('absolute text-green-500 ease-in transform transition', !copied ? 'scale-0' : 'scale-100')}/>