portfolio/components/ui/Code.tsx

'use client'

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

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 group" ref={preRef}>
                <button
                    className="absolute top-0 right-0 m-5 group-hover:opacity-100 opacity-0 transition-opacity ease-in delay-100 bg-[#121212] p-2 rounded-lg border-[1px] border-zinc-700/40"
                    onClick={handleCopy} aria-label="Copy code">
                {copied ? <CheckIcon className="size-5 text-green-500"/> :
                    <CopyIcon className="size-5 text-zinc-400 hover:text-zinc-50"/>}
                </button>
            <div className="mt-5 sm:mt-0 pb-5 overflow-auto ">
            {children}
            </div>
        </pre>
    )
}