site/src/components/copy.tsx 1.7 K raw
1
import { useState } from "react";
2
3
export function Copy() {
4
	const [copied, setCopied] = useState(false);
5
6
	const copyToClipboard = async () => {
7
		try {
8
			await navigator.clipboard.writeText(
9
				"curl -sSL https://darkmatter.build/install.sh | bash",
10
			);
11
			setCopied(true);
12
			setTimeout(() => setCopied(false), 2000);
13
		} catch (err) {
14
			console.error("Failed to copy:", err);
15
		}
16
	};
17
18
	return (
19
		<div className="max-w-lg w-full">
20
			<div className="relative rounded-lg bg-zinc-800 p-4 overflow-scroll mx-4 sm:mx-auto">
21
				<pre className="text-sm font-mono">
22
					<code>curl -sSL https://darkmatter.build/install.sh | bash</code>
23
				</pre>
24
				<button
25
					type="button"
26
					className="absolute hidden sm:block top-2.5 right-2 rounded-md p-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 focus:outline-none"
27
					onClick={copyToClipboard}
28
				>
29
					{copied ? (
30
						<svg
31
							xmlns="http://www.w3.org/2000/svg"
32
							width="16"
33
							height="16"
34
							viewBox="0 0 24 24"
35
							fill="none"
36
							stroke="currentColor"
37
							strokeWidth="2"
38
							strokeLinecap="round"
39
							strokeLinejoin="round"
40
							className="h-4 w-4"
41
						>
42
							<title>Copy</title>
43
							<polyline points="20 6 9 17 4 12"></polyline>
44
						</svg>
45
					) : (
46
						<svg
47
							xmlns="http://www.w3.org/2000/svg"
48
							width="16"
49
							height="16"
50
							viewBox="0 0 24 24"
51
							fill="none"
52
							stroke="currentColor"
53
							strokeWidth="2"
54
							strokeLinecap="round"
55
							strokeLinejoin="round"
56
							className="h-4 w-4"
57
						>
58
							<title>Copy</title>
59
							<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
60
							<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
61
						</svg>
62
					)}
63
				</button>
64
			</div>
65
		</div>
66
	);
67
}