Update components/Markdown/CodeBlock.tsx

components/Markdown/CodeBlock.tsx

@@ -1,4 +1,4 @@
-import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
+import { IconCheck, IconClipboard, IconDownload, IconPlay } from '@tabler/icons-react';
 import { FC, memo, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@@ -18,6 +18,11 @@ interface Props {
 export const CodeBlock: FC<Props> = memo(({ language, value }) => {
   const { t } = useTranslation('markdown');
   const [isCopied, setIsCopied] = useState<Boolean>(false);
+  const [isRunning, setIsRunning] = useState<Boolean>(false);
+
+  const toggleRunCode = () => {
+    setIsRunning(!isRunning);
+  };
 
   const copyToClipboard = () => {
     if (!navigator.clipboard || !navigator.clipboard.writeText) {
@@ -72,6 +77,13 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
             {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
             {isCopied ? t('Copied!') : t('Copy code')}
           </button>
+          <button
+            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
+            onClick={toggleRunCode}
+          >
+            <IconPlay size={18} />
+            {isRunning ? t('Stop') : t('Run code')}
+          </button>
           <button
             className="flex items-center rounded bg-none p-1 text-xs text-white"
             onClick={downloadAsFile}
@@ -88,6 +100,13 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
       >
         {value}
       </SyntaxHighlighter>
+      {isRunning && (
+        <iframe 
+          srcDoc={value} 
+          title="live code preview" 
+          className="w-full h-64 mt-4 border-2 border-gray-300"
+        />
+      )}
     </div>
   );
 });