Input Copyable

1"use client"
2 
3import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"
4import { Check, Copy } from "lucide-react"
5import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
6import { useCopyToClipboard } from "usehooks-ts"
7 
8type InputCopyableProps = {
9  value: string
10} & React.ComponentProps<typeof InputGroup>
11 
12export function InputCopyable(props: InputCopyableProps) {
13  const [copied, copy] = useCopyToClipboard()
14 
15  const CopyButton = ({ copied }: { copied: string | null }) => {
16    if (copied) {
17      return (
18        <Tooltip defaultOpen={true}>
19          <TooltipTrigger render={<Check />} />
20          <TooltipContent>Copied!</TooltipContent>
21        </Tooltip>
22      )
23    }
24 
25    return (
26      <Tooltip>
27        <TooltipTrigger render={<Copy />} />
28        <TooltipContent>Copy</TooltipContent>
29      </Tooltip>
30    )
31  }
32 
33  return (
34    <InputGroup {...props}>
35      <InputGroupInput value={props.value} readOnly className="overflow-ellipsis" />
36      <InputGroupAddon align="inline-end">
37        <InputGroupButton
38          aria-label="Copy"
39          title="Copy"
40          size="icon-xs"
41          onClick={() => {
42            copy(props.value)
43          }}
44        >
45          <CopyButton copied={copied} />
46        </InputGroupButton>
47      </InputGroupAddon>
48    </InputGroup>
49  )
50}