portfolio/components/ui/Code.tsx

'use client'

import React, {ReactNode, useRef, useState} from 'react'
import {CopyIcon} from '@/components/icons/CopyIcon'
import {CheckIcon} from '@/components/icons/CheckIcon'

export function Code({children}: { children: ReactNode }) {
    const [copied, setCopied] = useState<boolean>(false)
    const preRef = useRef<HTMLPreElement>(null)

    const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault()
        await navigator.clipboard.writeText(preRef.current?.innerText ?? '')
        setCopied(true)
        setTimeout(() => setCopied(false), 1000)
    }

    return (
        <pre className="relative" ref={preRef}>
            <button className="absolute right-0 top-0 m-5" onClick={handleCopy} aria-label="Copy code">
                {copied ? <CheckIcon className="size-5 text-indigo-500"/> :
                    <CopyIcon className="size-5 text-zinc-400 hover:text-zinc-50"/>}
            </button>
            {children}
        </pre>
    )
}