feat: inline copy feedback for code blocks

Author: cnaples79

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')
+       }
     />
   );
 };

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>
           )}