/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useState } from 'react';
interface CopyToClipboardProps {
value: string;
}
export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({ value }) => {
const [copied, setCopied] = useState(false);
React.useEffect(() => {
if (copied) {
const timer = setTimeout(() => setCopied(false), 2000);
return () => clearTimeout(timer);
}
}, [copied]);
const handleCopy = React.useCallback(async () => {
try {
await navigator.clipboard.writeText(value);
setCopied(true);
} catch (err) {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = value;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
setCopied(true);
}
}, [value]);
return (
<button
onClick={handleCopy}
className="px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded transition-colors"
title="Copier dans le presse-papiers"
>
{copied ? '✓ Copié' : '📋 Copier'}
</button>
);
};