CopyCode.tsx

// Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
// SPDX-License-Identifier: MIT

import React, { FunctionComponent } from 'react'

import { useToast } from '../hooks/use-toast'
import Highlighter from './Highlighter'

interface Props {
    codeString: string
    language: 'json'
}
const CopyCode: FunctionComponent<Props> = (props) => {
    const { toast } = useToast()
    const handleCopy = () => {
        navigator.clipboard.writeText(props.codeString)
        toast({
            title: 'Copied to clipboard',
            description: 'The code has been copied to your clipboard.',
        })
    }
    return (
        <div
            style={{
                height:
                    14 /*padding*/ + props.codeString.split('\n').length * 21.6,
            }}
            className="relative w-full overflow-hidden rounded-lg border"
        >
            <div className="bg-card absolute bottom-0 left-0 right-0 top-0 animate-pulse" />
            <button
                onClick={handleCopy}
                className="absolute right-1 top-1 z-10 rounded-lg bg-gray-700 p-1 px-2 text-sm text-white transition-all hover:bg-white/40"
            >
                Copy
            </button>
            <div className="relative">
                <Highlighter
                    codeString={props.codeString}
                    language={props.language}
                />
            </div>
        </div>
    )
}

export default CopyCode