refactor: website facelift (#10823)

apps/website/src/components/InstallButton.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Copy, CopyCheck } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useCopyToClipboard } from 'usehooks-ts';
+
+export function InstallButton({ className = '' }: { readonly className?: string }) {
+	const [interacted, setInteracted] = useState(false);
+	const [copiedText, copyToClipboard] = useCopyToClipboard();
+
+	useEffect(() => {
+		const timer = setTimeout(() => setInteracted(false), 2_000);
+		return () => clearTimeout(timer);
+	}, [interacted]);
+
+	return (
+		<button
+			className={`cursor-copy rounded-sm border border-neutral-300 bg-white px-4 py-2 font-mono hover:bg-neutral-200 dark:border-neutral-700 dark:bg-transparent dark:hover:bg-neutral-800 ${className}`}
+			onClick={async () => {
+				setInteracted(true);
+				await copyToClipboard('npm install discord.js');
+			}}
+			type="button"
+		>
+			<span className="text-base-blurple-400 font-semibold">{'>'}</span> npm install discord.js{' '}
+			{copiedText && interacted ? (
+				<CopyCheck aria-hidden className="ml-1 inline-block text-green-500" size={20} />
+			) : (
+				<Copy aria-hidden className="ml-1 inline-block" size={20} />
+			)}
+		</button>
+	);
+}