magicui

1
"use client";
2

3
import { DropdownMenuTriggerProps } from "@radix-ui/react-dropdown-menu";
4
import * as React from "react";
5
// import { NpmCommands } from "types/unist";
6

7
import { Icons } from "@/components/icons";
8
import { Button } from "@/components/ui/button";
9
import {
10
  DropdownMenu,
11
  DropdownMenuContent,
12
  DropdownMenuItem,
13
  DropdownMenuTrigger,
14
} from "@/components/ui/dropdown-menu";
15
import { Event, trackEvent } from "@/lib/events";
16
import { cn } from "@/lib/utils";
17

18
interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
19
  value: string;
20
  src?: string;
21
  event?: Event["name"];
22
}
23

24
async function copyToClipboardWithMeta(value: string, event?: Event) {
25
  navigator.clipboard.writeText(value);
26
  if (event) {
27
    trackEvent(event);
28
  }
29
}
30

31
export function CopyButton({
32
  value,
33
  className,
34
  src,
35
  event,
36
  ...props
37
}: CopyButtonProps) {
38
  const [hasCopied, setHasCopied] = React.useState(false);
39

40
  React.useEffect(() => {
41
    setTimeout(() => {
42
      setHasCopied(false);
43
    }, 2000);
44
  }, [hasCopied]);
45

46
  return (
47
    <Button
48
      size="icon"
49
      variant="ghost"
50
      className={cn(
51
        "relative z-10 h-6 w-6 text-zinc-50 hover:bg-background/70 hover:text-zinc-50",
52
        className,
53
      )}
54
      onClick={() => {
55
        copyToClipboardWithMeta(
56
          value,
57
          event
58
            ? {
59
                name: event,
60
                properties: {
61
                  name: src!,
62
                  code: value,
63
                },
64
              }
65
            : undefined,
66
        );
67
        setHasCopied(true);
68
      }}
69
      {...props}
70
    >
71
      <span className="sr-only">Copy</span>
72
      {hasCopied ? (
73
        <Icons.check className="h-3 w-3" />
74
      ) : (
75
        <Icons.copy className="h-3 w-3" />
76
      )}
77
    </Button>
78
  );
79
}
80

81
interface CopyWithClassNamesProps extends DropdownMenuTriggerProps {
82
  value: string;
83
  classNames: string;
84
  className?: string;
85
}
86

87
export function CopyWithClassNames({
88
  value,
89
  classNames,
90
  className,
91
  ...props
92
}: CopyWithClassNamesProps) {
93
  const [hasCopied, setHasCopied] = React.useState(false);
94

95
  React.useEffect(() => {
96
    setTimeout(() => {
97
      setHasCopied(false);
98
    }, 2000);
99
  }, [hasCopied]);
100

101
  const copyToClipboard = React.useCallback((value: string) => {
102
    copyToClipboardWithMeta(value);
103
    setHasCopied(true);
104
  }, []);
105

106
  return (
107
    <DropdownMenu>
108
      <DropdownMenuTrigger asChild>
109
        <Button
110
          size="icon"
111
          variant="ghost"
112
          className={cn(
113
            "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
114
            className,
115
          )}
116
        >
117
          {hasCopied ? (
118
            <Icons.check className="h-3 w-3" />
119
          ) : (
120
            <Icons.copy className="h-3 w-3" />
121
          )}
122
          <span className="sr-only">Copy</span>
123
        </Button>
124
      </DropdownMenuTrigger>
125
      <DropdownMenuContent align="end">
126
        <DropdownMenuItem onClick={() => copyToClipboard(value)}>
127
          <Icons.react className="mr-2 h-4 w-4" />
128
          <span>Component</span>
129
        </DropdownMenuItem>
130
        <DropdownMenuItem onClick={() => copyToClipboard(classNames)}>
131
          <Icons.tailwind className="mr-2 h-4 w-4" />
132
          <span>Classname</span>
133
        </DropdownMenuItem>
134
      </DropdownMenuContent>
135
    </DropdownMenu>
136
  );
137
}
138

139
// interface CopyNpmCommandButtonProps extends DropdownMenuTriggerProps {
140
//   commands: Required<NpmCommands>;
141
// }
142

143
// export function CopyNpmCommandButton({
144
//   commands,
145
//   className,
146
//   ...props
147
// }: CopyNpmCommandButtonProps) {
148
//   const [hasCopied, setHasCopied] = React.useState(false);
149

150
//   React.useEffect(() => {
151
//     setTimeout(() => {
152
//       setHasCopied(false);
153
//     }, 2000);
154
//   }, [hasCopied]);
155

156
//   const copyCommand = React.useCallback(
157
//     (value: string, pm: "npm" | "pnpm" | "yarn") => {
158
//       copyToClipboardWithMeta(value, {
159
//         name: "copy_npm_command",
160
//         properties: {
161
//           command: value,
162
//           pm,
163
//         },
164
//       });
165
//       setHasCopied(true);
166
//     },
167
//     []
168
//   );
169

170
//   return (
171
//     <DropdownMenu>
172
//       <DropdownMenuTrigger asChild>
173
//         <Button
174
//           size="icon"
175
//           variant="ghost"
176
//           className={cn(
177
//             "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
178
//             className
179
//           )}
180
//         >
181
//           {hasCopied ? (
182
//             <Icons.check className="h-3 w-3" />
183
//           ) : (
184
//             <Icons.copy className="h-3 w-3" />
185
//           )}
186
//           <span className="sr-only">Copy</span>
187
//         </Button>
188
//       </DropdownMenuTrigger>
189
//       <DropdownMenuContent align="end">
190
//         <DropdownMenuItem
191
//           onClick={() => copyCommand(commands.__npmCommand__, "npm")}
192
//         >
193
//           npm
194
//         </DropdownMenuItem>
195
//         <DropdownMenuItem
196
//           onClick={() => copyCommand(commands.__yarnCommand__, "yarn")}
197
//         >
198
//           yarn
199
//         </DropdownMenuItem>
200
//         <DropdownMenuItem
201
//           onClick={() => copyCommand(commands.__pnpmCommand__, "pnpm")}
202
//         >
203
//           pnpm
204
//         </DropdownMenuItem>
205
//       </DropdownMenuContent>
206
//     </DropdownMenu>
207
//   );
208
// }
209