From 06b33b6d8d4285e2918b6560b5a2a29a7cf02c3f Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 2 Mar 2025 18:02:23 -0600
Subject: [PATCH] feat: add copy button to code blocks in blog posts

---
 .../website/app/[locale]/blog/[slug]/page.tsx | 12 ++++---
 apps/website/components/ui/copy-button.tsx    | 32 +++++++++++++++++++
 2 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 apps/website/components/ui/copy-button.tsx

diff --git a/apps/website/app/[locale]/blog/[slug]/page.tsx b/apps/website/app/[locale]/blog/[slug]/page.tsx
index 1845140..63a7c74 100644
--- a/apps/website/app/[locale]/blog/[slug]/page.tsx
+++ b/apps/website/app/[locale]/blog/[slug]/page.tsx
@@ -1,3 +1,4 @@
+import { CopyButton } from "@/components/ui/copy-button";
 import { getPost, getPosts } from "@/lib/ghost";
 import type { Metadata, ResolvingMetadata } from "next";
 import { getTranslations } from "next-intl/server";
@@ -121,10 +122,13 @@ async function CodeBlock(props: LanguageProps) {
 	});
 
 	return (
-		<div
-			dangerouslySetInnerHTML={{ __html: out }}
-			className="text-sm p-4 rounded-lg bg-[#18191F]"
-		/>
+		<div className="group relative">
+			<CopyButton text={format} />
+			<div
+				dangerouslySetInnerHTML={{ __html: out }}
+				className="text-sm p-4 rounded-lg bg-[#18191F]"
+			/>
+		</div>
 	);
 }
 export default async function BlogPostPage({ params }: Props) {
diff --git a/apps/website/components/ui/copy-button.tsx b/apps/website/components/ui/copy-button.tsx
new file mode 100644
index 0000000..cf131bb
--- /dev/null
+++ b/apps/website/components/ui/copy-button.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+
+interface CopyButtonProps {
+	text: string;
+}
+
+export function CopyButton({ text }: CopyButtonProps) {
+	const [isCopied, setIsCopied] = useState(false);
+
+	const copy = async () => {
+		await navigator.clipboard.writeText(text);
+		setIsCopied(true);
+		setTimeout(() => setIsCopied(false), 2000);
+	};
+
+	return (
+		<button
+			className="absolute right-4 top-4 z-20 h-8 w-8 rounded-md border bg-background/50 p-1.5 backdrop-blur-sm transition-all hover:bg-background/80"
+			onClick={copy}
+			type="button"
+		>
+			{isCopied ? (
+				<CheckIcon className="h-full w-full text-green-500" />
+			) : (
+				<CopyIcon className="h-full w-full text-gray-400" />
+			)}
+		</button>
+	);
+}