docs/components/Landing.tsx 2.1 K raw
1
import { useState } from "react";
2
3
export function Landing() {
4
	const [copied, setCopied] = useState(false);
5
6
	const copyToClipboard = async () => {
7
		try {
8
			await navigator.clipboard.writeText("bun create bhvr@latest");
9
			setCopied(true);
10
			setTimeout(() => setCopied(false), 2000);
11
		} catch (err) {
12
			console.error("Failed to copy:", err);
13
		}
14
	};
15
16
	return (
17
		<main className="flex max-w-lg sm:max-w-2xl mx-auto flex-col items-center justify-start p-4 ">
18
			<div className="w-full max-w-2xl flex flex-col items-center gap-8">
19
				<div className="flex flex-col items-center gap-3">
20
					<p className="text-xl text-muted-foreground">
21
						Bun + Hono + Vite + React
22
					</p>
23
					<p className="text-center max-w-md">
24
						Modern and lightweight stack for the open web
25
					</p>
26
				</div>
27
28
				<div className="w-full">
29
					<div className="relative w-full rounded-lg bg-zinc-800 p-4 overflow-hidden">
30
						<pre className="text-sm font-mono">
31
							<code>bun create bhvr@latest</code>
32
						</pre>
33
						<button
34
							className="absolute top-2 right-2 rounded-md p-2 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none"
35
							onClick={copyToClipboard}
36
						>
37
							{copied ? (
38
								<svg
39
									xmlns="http://www.w3.org/2000/svg"
40
									width="16"
41
									height="16"
42
									viewBox="0 0 24 24"
43
									fill="none"
44
									stroke="currentColor"
45
									strokeWidth="2"
46
									strokeLinecap="round"
47
									strokeLinejoin="round"
48
									className="h-4 w-4"
49
								>
50
									<polyline points="20 6 9 17 4 12"></polyline>
51
								</svg>
52
							) : (
53
								<svg
54
									xmlns="http://www.w3.org/2000/svg"
55
									width="16"
56
									height="16"
57
									viewBox="0 0 24 24"
58
									fill="none"
59
									stroke="currentColor"
60
									strokeWidth="2"
61
									strokeLinecap="round"
62
									strokeLinejoin="round"
63
									className="h-4 w-4"
64
								>
65
									<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
66
									<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
67
								</svg>
68
							)}
69
						</button>
70
					</div>
71
				</div>
72
			</div>
73
		</main>
74
	);
75
}