From 0b97d30542bc3a3cbe798a01660c965e13f4083c Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Wed, 16 Apr 2025 22:22:12 +0100
Subject: [PATCH] Add animation to code component

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

diff --git a/components/ui/Code.tsx b/components/ui/Code.tsx
index fea07f9..648ea5f 100644
--- a/components/ui/Code.tsx
+++ b/components/ui/Code.tsx
@@ -1,8 +1,9 @@
 'use client'
 
 import React, {ReactNode, useRef, useState} from 'react'
-import {CopyIcon} from '@/components/icons/CopyIcon'
 import {CheckIcon} from '@/components/icons/CheckIcon'
+import {CopyIcon} from '@/components/icons/CopyIcon'
+import clsx from 'clsx';
 
 export function Code({children}: { children: ReactNode }) {
     const [copied, setCopied] = useState<boolean>(false)
@@ -16,10 +17,16 @@ export function Code({children}: { children: ReactNode }) {
     }
 
     return (
-        <pre className="relative" ref={preRef}>
-                <button className="absolute top-0 right-0 m-5" onClick={handleCopy} aria-label="Copy code">
-                {copied ? <CheckIcon className="size-6 text-green-500"/> :
-                    <CopyIcon className="size-6 text-zinc-400 hover:text-zinc-50"/>}
+        <pre className="relative group" ref={preRef}>
+                <button
+                    className="absolute top-0 right-0 m-5 group-hover:opacity-100 opacity-0 transition-opacity ease-in delay-100 p-2"
+                    onClick={handleCopy} aria-label="Copy code">
+                    <div className="relative size-6">
+                        <CheckIcon
+                            className={clsx('absolute text-green-500 ease-in transform transition', !copied ? 'scale-0' : 'scale-100')}/>
+                        <CopyIcon
+                            className={clsx('absolute text-zinc-400 hover:text-zinc-50 ease-in transform transition', !copied ? 'scale-100' : 'scale-0')}/>
+                    </div>
                 </button>
             <div className="mt-5 sm:mt-0 pb-5 overflow-auto ">
             {children}