From 68c44215cc1b98a070322e22411cbd3effd7e4b0 Mon Sep 17 00:00:00 2001
From: Chase Naples <Cnaples79@gmail.com>
Date: Thu, 25 Dec 2025 15:10:11 -0500
Subject: [PATCH] feat: inline copy feedback for code blocks

---
 apps/site/components/Common/CodeBox.tsx       | 23 ++++++-------------
 .../src/Common/BaseCodeBox/index.tsx          |  9 +++++++-
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/apps/site/components/Common/CodeBox.tsx b/apps/site/components/Common/CodeBox.tsx
index c5786b4df7f2b..9af924ade073c 100644
--- a/apps/site/components/Common/CodeBox.tsx
+++ b/apps/site/components/Common/CodeBox.tsx
@@ -1,9 +1,6 @@
 'use client';
 
-import { CodeBracketIcon } from '@heroicons/react/24/outline';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
-import styles from '@node-core/ui-components/Common/BaseCodeBox/index.module.css';
-import { useNotification } from '@node-core/ui-components/Providers/NotificationProvider';
 import { useTranslations } from 'next-intl';
 
 import Link from '#site/components/Link';
@@ -18,30 +15,24 @@ type CodeBoxProps = {
 };
 
 const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = props => {
-  const [, copyToClipboard] = useCopyToClipboard();
-  const notify = useNotification();
+  const [copied, copyToClipboard] = useCopyToClipboard();
   const t = useTranslations();
 
   const onCopy = (text: string) => {
     copyToClipboard(text);
-
-    notify({
-      duration: 800,
-      message: (
-        <div className="flex items-center gap-3">
-          <CodeBracketIcon className={styles.icon} />
-          {t('components.common.codebox.copied')}
-        </div>
-      ),
-    });
   };
 
   return (
     <BaseCodeBox
       as={Link}
       onCopy={onCopy}
+       copied={copied}
       {...props}
-      buttonText={t('components.common.codebox.copy')}
+       buttonText={
+         copied
+           ? t('components.common.codebox.copied')
+           : t('components.common.codebox.copy')
+       }
     />
   );
 };
diff --git a/packages/ui-components/src/Common/BaseCodeBox/index.tsx b/packages/ui-components/src/Common/BaseCodeBox/index.tsx
index 5486908af2a2f..a2a51bbba546a 100644
--- a/packages/ui-components/src/Common/BaseCodeBox/index.tsx
+++ b/packages/ui-components/src/Common/BaseCodeBox/index.tsx
@@ -3,6 +3,7 @@
 import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import { Fragment, isValidElement, useRef } from 'react';
+import { CheckIcon } from '@heroicons/react/24/outline';
 
 import BaseButton from '#ui/Common/BaseButton';
 
@@ -71,6 +72,7 @@ type CodeBoxProps = {
   as?: LinkLike;
   buttonText: string;
   showCopyButton?: boolean;
+  copied?: boolean;
 };
 
 const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
@@ -81,6 +83,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   buttonText,
   as = 'a',
   showCopyButton = true,
+  copied = false,
 }: PropsWithChildren<CodeBoxProps>) => {
   const containerRef = useRef<HTMLPreElement>(null);
 
@@ -110,7 +113,11 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
               kind="neutral"
               onClick={handleCopy}
             >
-              <DocumentDuplicateIcon className={styles.icon} />
+              {copied ? (
+                <CheckIcon className={styles.icon} />
+              ) : (
+                <DocumentDuplicateIcon className={styles.icon} />
+              )}
               {buttonText}
             </BaseButton>
           )}