1
npm i lucide-react

1
'use client';
2

3
import React, { useState } from 'react';
4
import { Check, Copy } from 'lucide-react';
5

6
const CopyTextButton = ({
7
  handle, // * Text you want the user to copy
8
  icon = <Copy className="h-5 w-5"/>, // * Icon to show on the button
9
  variant = 'default',
10
  onCopy
11
}: {
12
  handle: string;
13
  icon?: React.ReactNode;
14
  variant?: 'default' | 'small';
15
  onCopy?: () => void;
16
}) => {
17
  const [copied, setCopied] = useState(false);
18
  const handleCopy = () => {
19
    if (onCopy) onCopy();
20
    else navigator.clipboard.writeText(handle);
21
    setCopied(true);
22
    setTimeout(() => setCopied(false), 1200);
23
  };
24

25
  return (
26
    <button
27
      className={`bg-gray-800 w-min hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition ${
28
        variant === 'small' && 'text-xs'
29
      }`}
30
      onClick={handleCopy}
31
    >
32
      {copied ? (
33
        <Check className={`${variant === 'small' ? 'w-4 h-4' : 'w-5 h-5'} text-green-400`} />
34
      ) : (
35
        icon
36
      )}
37
      <span className="whitespace-nowrap">{handle}</span>
38
    </button>
39
  );
40
};
41

42
export default CopyTextButton;