From 4174d7396d5b7a39c5665fccaf05e788b2ee814e Mon Sep 17 00:00:00 2001
From: Mitchell Christ <xzmaru@gmail.com>
Date: Sun, 2 Feb 2025 17:07:23 -0800
Subject: [PATCH] add copied state to ClickToCopy component

---
 package.json           |  2 +-
 src/ui/ClickToCopy.tsx | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 6c39138..8a89887 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sanitypress",
-	"version": "6.0.4",
+	"version": "6.0.5",
 	"description": "An impressive Next.js + Sanity.io starter template",
 	"author": "nuotsu <mitchell@nuotsu.dev> (https://nuotsu.dev)",
 	"license": "ISC",
diff --git a/src/ui/ClickToCopy.tsx b/src/ui/ClickToCopy.tsx
index 7d4df26..1b53f8a 100644
--- a/src/ui/ClickToCopy.tsx
+++ b/src/ui/ClickToCopy.tsx
@@ -1,27 +1,32 @@
 'use client'
 
-import { VscCopy } from 'react-icons/vsc'
+import { VscCheck, VscCopy } from 'react-icons/vsc'
+import { useState, type ComponentProps } from 'react'
 import { cn } from '@/lib/utils'
 
 export default function ClickToCopy({
 	value,
-	children,
 	className,
 	...props
 }: {
 	value?: string
 } & React.ComponentProps<'button'>) {
+	const [copied, setCopied] = useState(false)
 	return (
 		<button
-			className={cn('cursor-copy', className)}
+			className={cn('cursor-copy', copied && 'pointer-events-none', className)}
 			onClick={() => {
 				if (typeof window === 'undefined' || !value) return
+
 				navigator.clipboard.writeText(value)
+
+				setCopied(true)
+				setTimeout(() => setCopied(false), 1000)
 			}}
 			title="Click to copy"
 			{...props}
 		>
-			{children || <VscCopy />}
+			{copied ? <VscCheck /> : <VscCopy />}
 		</button>
 	)
 }