File size: 1,264 Bytes
d092f57
 
 
 
 
 
 
 
 
 
 
00acb79
d092f57
 
00acb79
d092f57
 
 
 
 
 
 
 
 
 
00acb79
d092f57
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { FC } from "react"
import IconClipboard from "../icon/IconClipboard"

interface Props {
  value: string
  className?: string
}

const InputClipboardCopy: FC<Props> = ({ value, className }) => {
  return (
    <div
      className={"rounded-lg flex flex-row items-center bg-dark-900 border border-dark-700/50 overflow-hidden " + className}
    >
      <input
        className={"rounded-l-lg grow bg-transparent p-3 outline-none " + className}
        value={value}
        type={"text"}
        readOnly={true}
        onClick={(event) => {
          const target = event.target as HTMLInputElement
          target.select()
        }}
      />
      <button
        className={
          "px-4 py-3 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 flex flex-row items-center gap-2 cursor-copy font-medium transition-all duration-200"
        }
        data-tooltip-content={"Click to copy"}
        type={"button"}
        onClick={() => {
          navigator.clipboard
            .writeText(value)
            .then(() => {})
            .catch((error) => {
              console.error("Failed to copy", error)
            })
        }}
      >
        <IconClipboard /> Copy
      </button>
    </div>
  )
}

export default InputClipboardCopy