feat(frontend): add copy button to code block

1 files changed, 25 insertions, 3 deletions

diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx
index 019709a..360f352 100644
--- a/frontend/app/components/Gaming/CodeBlock.tsx
+++ b/frontend/app/components/Gaming/CodeBlock.tsx
@@ -1,3 +1,5 @@
+import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { JSX, useLayoutEffect, useState } from "react";
 import { type BundledLanguage, highlight } from "../../highlight";
 
@@ -8,14 +10,34 @@ type Props = {
 
 export default function CodeBlock({ code, language }: Props) {
 	const [nodes, setNodes] = useState<JSX.Element | null>(null);
+	const [showCopied, setShowCopied] = useState(false);
 
 	useLayoutEffect(() => {
 		highlight(code, language).then(setNodes);
 	}, [code, language]);
 
+	const handleCopy = () => {
+		navigator.clipboard.writeText(code).then(() => {
+			setShowCopied(true);
+			setTimeout(() => setShowCopied(false), 3000);
+		});
+	};
+
 	return (
-		<pre className="h-full w-full p-2 bg-gray-50 rounded-lg border border-gray-300 whitespace-pre-wrap break-words">
-			{nodes === null ? <code>{code}</code> : nodes}
-		</pre>
+		<div className="relative">
+			<button
+				onClick={handleCopy}
+				className="absolute top-2 right-2 z-10 px-2 py-1 bg-white border border-gray-300 rounded shadow-md hover:bg-gray-100 transition-colors"
+				title="コードをコピーする"
+			>
+				<FontAwesomeIcon icon={faCopy} className="text-gray-600" />
+				{showCopied && (
+					<span className="ml-1 text-xs text-blue-600">Copied!</span>
+				)}
+			</button>
+			<pre className="h-full w-full p-2 bg-gray-50 rounded-lg border border-gray-300 whitespace-pre-wrap break-words">
+				{nodes === null ? <code>{code}</code> : nodes}
+			</pre>
+		</div>
 	);
 }