chore: fixed copied text UI issue (#2147)

asyncapi · Jan 24, 2025 · 8f8ae07 · 8f8ae07
1 parent 1feddbd
commit 8f8ae07
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/modelina-website/src/components/CodeBlock.tsx b/modelina-website/src/components/CodeBlock.tsx
@@ -5,6 +5,7 @@ import Highlight from 'react-syntax-highlighter';
 
 import Caption from './Caption';
 import IconClipboard from './icons/Clipboard';
+import IconCheck from './icons/IconCheck';
 
 const theme = {
   hljs: {
@@ -270,10 +271,13 @@ export default function CodeBlock({
               className='absolute right-2 top-1 z-50 cursor-pointer bg-code-editor-dark text-xs text-gray-500 hover:text-gray-300 focus:outline-none'
               title='Copy to clipboard'
             >
-              {showIsCopied && <span className='mr-2 inline-block pl-2 pt-1'>Copied!</span>}
-              <span className='inline-block pt-1'>
-                <IconClipboard className='-mt-0.5 inline-block size-4' />
-              </span>
+              <span>
+             {showIsCopied ? (
+             <IconCheck className='mt-2 mr-1 inline-block size-4' />
+             ) : (
+             <IconClipboard className='mt-2  mr-1 inline-block size-4' />
+              )}
+            </span>
             </button>
           </div>
         )}

diff --git a/modelina-website/src/components/icons/IconCheck.tsx b/modelina-website/src/components/icons/IconCheck.tsx
@@ -0,0 +1,21 @@
+export default function IconCheck({ className }: any) {
+    return (
+      <svg
+        className={className || 'inline-block'}
+        fill='currentColor'
+        viewBox='0 0 22 22'
+
+      >
+        <circle cx='12' cy='12' r='10' className='text-gray-500' />
+        <path
+          d='M7 12l3 3 7-7'
+          fill='none'
+          stroke='#252f3f'
+          strokeWidth='2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+      </svg>
+    );
+  }
+