stackrender/src/components/clipboard.tsx

import React, { useCallback, useState } from "react";

import { useTranslation } from "react-i18next";


import { Copy, CopyCheck } from "lucide-react";
import { Tooltip , TooltipContent, TooltipTrigger} from "./ui/tooltip";


import { Button } from "./ui/button";




interface ClipboardProps {
    text?: string
}

const Clipboard: React.FC<ClipboardProps> = ({ text }) => {
    const { t } = useTranslation();


    const [isCopied, setIsCopied] = useState<boolean>(false);

    const copyToClipboard = useCallback(async () => {


        if (text)
            try {
                await navigator.clipboard.writeText(text);
                setIsCopied(true);
                setTimeout(() => {
                    setIsCopied(false);
                }, 500)

            } catch (err) {

                setIsCopied(false);
            }

    }, [text])

    return (
  <Tooltip>
            <TooltipTrigger asChild>
                <span>
                    <Button
                        size="icon"
                        variant="outline"
                        className="w-7 h-7 text-muted-foreground bg-card/50   backdrop-blur-xs dark:backdrop-blur-md shadow-lg"
                        onClick={copyToClipboard}
                    >
                        {
                            !isCopied ? <Copy className="size-4" /> : <CopyCheck className="size-4" />

                        }
                    </Button>
                </span>
            </TooltipTrigger>
            <TooltipContent>
                {!isCopied ? t("clipboard.copy") : t("clipboard.copied")}
            </TooltipContent>
        </Tooltip>
    )
};

export default React.memo(Clipboard)