better-auth/docs/components/builder/code-tabs/code-editor.tsx

"use client";

import { useState } from "react";
import { Highlight } from "prism-react-renderer";
import { Check, Copy } from "lucide-react";
import { Button } from "@/components/ui/button";
import theme from "./theme";

interface CodeEditorProps {
	code: string;
	language: string;
}

export function CodeEditor({ code, language }: CodeEditorProps) {
	const [isCopied, setIsCopied] = useState(false);

	const copyToClipboard = async () => {
		try {
			await navigator.clipboard.writeText(code);
			setIsCopied(true);
			setTimeout(() => setIsCopied(false), 2000);
		} catch (err) {
			console.error("Failed to copy text: ", err);
		}
	};

	return (
		<div className="relative">
			<div className="dark:bg-bg-white rounded-md overflow-hidden">
				<Highlight theme={theme} code={code} language={language}>
					{({ className, style, tokens, getLineProps, getTokenProps }) => (
						<div className="overflow-auto max-h-[400px]">
							<pre
								className={`${className} relative text-sm p-4 w-full min-w-fit rounded-md`}
								style={style}
							>
								{tokens.map((line, i) => {
									const lineProps = getLineProps({ line, key: i });
									return (
										<div
											key={i}
											className={lineProps.className}
											style={lineProps.style}
										>
											<span className="sticky dark:bg-black top-0 left-0 mr-4 mx-auto pr-2 text-gray-500 select-none">
												{i + 1}
											</span>
											{line.map((token, key) => {
												const tokenProps = getTokenProps({ token, key });
												return (
													<span
														key={key}
														className={tokenProps.className}
														style={tokenProps.style}
													>
														{tokenProps.children}
													</span>
												);
											})}
										</div>
									);
								})}
							</pre>
						</div>
					)}
				</Highlight>
				<Button
					variant="outline"
					size="icon"
					className="absolute top-2 right-2"
					onClick={copyToClipboard}
					aria-label="Copy code"
				>
					{isCopied ? (
						<Check className="h-4 w-4" />
					) : (
						<Copy className="h-4 w-4" />
					)}
				</Button>
			</div>
		</div>
	);
}