1'use client';
2
3import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
4import * as React from 'react';
5import { cn } from '../lib/cn';
6
7type IconProps = React.SVGProps<SVGSVGElement> & {
8 size?: number | string;
9};
10
11function CheckCircleIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
12 return (
13 <svg
14 xmlns="http://www.w3.org/2000/svg"
15 width={size}
16 height={size}
17 viewBox="0 0 24 24"
18 fill="none"
19 stroke="currentColor"
20 strokeWidth={strokeWidth}
21 strokeLinecap="round"
22 strokeLinejoin="round"
23 aria-hidden="true"
24 {...props}
25 >
26 <circle cx="12" cy="12" r="9.5" />
27 <path d="m8 12 2.7 2.7L16 9.3" />
28 </svg>
29 );
30}
31
32function CopyIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
33 return (
34 <svg
35 xmlns="http://www.w3.org/2000/svg"
36 width={size}
37 height={size}
38 viewBox="0 0 24 24"
39 fill="none"
40 stroke="currentColor"
41 strokeWidth={strokeWidth}
42 strokeLinecap="round"
43 strokeLinejoin="round"
44 aria-hidden="true"
45 {...props}
46 >
47 <rect x="8.5" y="8.5" width="12.5" height="12.5" rx="3" />
48 <path d="M5.5 15.5h-.5a2.5 2.5 0 0 1-2.5-2.5V5.5A2.5 2.5 0 0 1 5 3h7.5A2.5 2.5 0 0 1 15 5.5V6" />
49 </svg>
50 );
51}
52
53const ICON_VARIANTS = {
54 initial: { opacity: 0, scale: 0.6, rotate: -10 },
55 animate: { opacity: 1, scale: 1, rotate: 0 },
56 exit: { opacity: 0, scale: 0.6, rotate: 10 },
57} as const;
58
59const ICON_TRANSITION = { duration: 0.18, ease: 'easeOut' } as const;
60const REDUCED_MOTION_PROPS = {
61 initial: { opacity: 0 },
62 animate: { opacity: 1 },
63 exit: { opacity: 0 },
64 transition: { duration: 0.12 },
65} as const;
66
67export interface CommandLabels {
68 copy: string;
69 copyHint: string;
70 copied: string;
71}
72
73const DEFAULT_LABELS: CommandLabels = {
74 copy: 'Copy command',
75 copyHint: 'Copy to clipboard',
76 copied: 'Copied!',
77};
78
79export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
80 command: string;
81 prefix?: string;
82 resetDelay?: number;
83 onCopied?: () => void;
84 labels?: Partial<CommandLabels>;
85}
86
87export const Command = ({
88 command,
89 prefix = '$',
90 resetDelay = 2000,
91 onCopied,
92 labels: labelOverrides,
93 className,
94 ref,
95 ...props
96}: CommandProps & { ref?: React.Ref<HTMLDivElement> }) => {
97 const labels = { ...DEFAULT_LABELS, ...labelOverrides };
98 const [copied, setCopied] = React.useState(false);
99 const shouldReduceMotion = useReducedMotion();
100 const resetTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
101
102 React.useEffect(() => {
103 return () => {
104 if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
105 };
106 }, []);
107
108 const markCopied = React.useCallback(() => {
109 setCopied(true);
110 onCopied?.();
111 if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
112 resetTimeoutRef.current = setTimeout(() => setCopied(false), resetDelay);
113 }, [onCopied, resetDelay]);
114
115 const handleCopy = React.useCallback(async () => {
116 if (copied) return;
117 try {
118 await navigator.clipboard.writeText(command);
119 markCopied();
120 } catch {
121 const previousFocus =
122 document.activeElement instanceof HTMLElement ? document.activeElement : null;
123 const textarea = document.createElement('textarea');
124 textarea.value = command;
125 textarea.setAttribute('readonly', '');
126 textarea.style.position = 'fixed';
127 textarea.style.opacity = '0';
128 document.body.appendChild(textarea);
129 textarea.focus();
130 textarea.select();
131 let succeeded: boolean;
132 try {
133 succeeded = document.execCommand('copy');
134 } catch {
135 succeeded = false;
136 } finally {
137 document.body.removeChild(textarea);
138 previousFocus?.focus();
139 }
140 if (succeeded) markCopied();
141 }
142 }, [command, copied, markCopied]);
143
144 return (
145 <div
146 ref={ref}
147 className={cn(
148 'text-foreground bg-muted/30 border-border flex w-full items-center gap-3 rounded-md border px-4 py-2.5 font-mono text-sm',
149 className,
150 )}
151 {...props}
152 >
153 <span className="text-muted-foreground shrink-0 select-none" aria-hidden="true">
154 {prefix}
155 </span>
156
157 <code className="min-w-0 flex-1 overflow-x-auto text-sm whitespace-nowrap select-all">
158 {command}
159 </code>
160
161 <button
162 type="button"
163 onClick={handleCopy}
164 aria-label={labels.copy}
165 title={copied ? labels.copied : labels.copyHint}
166 className={cn(
167 'text-muted-foreground hover:text-foreground -m-1.5 shrink-0 rounded p-2 transition-colors',
168 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none',
169 copied && 'text-success hover:text-success',
170 )}
171 >
172 <AnimatePresence mode="wait" initial={false}>
173 {copied ? (
174 <motion.span
175 key="check"
176 initial={shouldReduceMotion ? REDUCED_MOTION_PROPS.initial : ICON_VARIANTS.initial}
177 animate={shouldReduceMotion ? REDUCED_MOTION_PROPS.animate : ICON_VARIANTS.animate}
178 exit={shouldReduceMotion ? REDUCED_MOTION_PROPS.exit : ICON_VARIANTS.exit}
179 transition={shouldReduceMotion ? REDUCED_MOTION_PROPS.transition : ICON_TRANSITION}
180 className="flex"
181 aria-hidden="true"
182 >
183 <CheckCircleIcon size={16} className="size-4" />
184 </motion.span>
185 ) : (
186 <motion.span
187 key="copy"
188 initial={shouldReduceMotion ? REDUCED_MOTION_PROPS.initial : ICON_VARIANTS.initial}
189 animate={shouldReduceMotion ? REDUCED_MOTION_PROPS.animate : ICON_VARIANTS.animate}
190 exit={shouldReduceMotion ? REDUCED_MOTION_PROPS.exit : ICON_VARIANTS.exit}
191 transition={shouldReduceMotion ? REDUCED_MOTION_PROPS.transition : ICON_TRANSITION}
192 className="flex"
193 aria-hidden="true"
194 >
195 <CopyIcon size={16} className="size-4" />
196 </motion.span>
197 )}
198 </AnimatePresence>
199 </button>
200 <span role="status" aria-live="polite" className="sr-only">
201 {copied ? labels.copied : ''}
202 </span>
203 </div>
204 );
205};
