added copy clipboard

components/CodeBlock.tsx

@@ -0,0 +1,64 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
+
+const CodeBlock = ({ children }) => {
+  const textareaRef = useRef(null);
+  const [codeString, setCodeString] = useState('');
+  const [copied, setCopied] = useState(false);  // New state variable
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      setCodeString(textareaRef.current.textContent || '');
+    }
+  }, [children]);
+
+  const handleCopyClick = () => {
+    if (codeString) {
+      navigator.clipboard.writeText(codeString).then(() => {
+        setCopied(true); // Set copied state to true
+        setTimeout(() => setCopied(false), 3000); // Reset after 3 seconds
+
+        //alert('Code copied to clipboard!');
+      }, () => {
+        alert('Failed to copy code!');
+      });
+    }
+  };
+
+  return (
+    <div style={{ position: 'relative', borderRadius: '5px', top: '20px' }}>
+      <pre style={{ margin: 0, padding: '0px', fontSize: '1.1em' }}>
+        <code ref={textareaRef} style={{fontSize: '0.9em' }}>
+          {children}
+        </code>
+      </pre>
+      <button 
+        onClick={handleCopyClick} 
+        style={{
+          position: 'absolute', 
+          top: '10px', 
+          right: '10px',
+          backgroundColor: 'transparent',
+          border: 'none',
+          borderRadius: '5px',
+          cursor: 'pointer',
+          fontSize: '0.5em',
+          transition: 'color 0.3s',
+        }}
+        //onMouseOver={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.color = '#007bff'}
+        //onMouseOut={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.color = 'black'}
+      >
+        <FontAwesomeIcon 
+            icon={copied ? faCheck : faCopy}
+            size="2x" 
+            style={{ opacity: 0.5 }}
+            onMouseOver={(e: React.MouseEvent<SVGSVGElement>) => e.currentTarget.style.opacity = '1'}
+            onMouseOut={(e: React.MouseEvent<SVGSVGElement>) => e.currentTarget.style.opacity = '0.5'}
+        />
+      </button>
+    </div>
+  );
+};
+
+export default CodeBlock;

components/button.tsx

@@ -0,0 +1,22 @@
+import cn from 'clsx'
+import type { ComponentProps, ReactElement } from 'react'
+
+export const Button = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<'button'>): ReactElement => {
+  return (
+    <button
+      className={cn(
+        'nextra-button nx-transition-all active:nx-opacity-50',
+        'nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5',
+        'dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

components/check.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps, ReactElement } from 'react'
+
+export function CheckIcon(props: ComponentProps<'svg'>): ReactElement {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}

components/copy-to-clipboard.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps, ReactElement } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { CheckIcon } from './check'
+import { CopyIcon } from './copy'
+import { Button } from './button'
+
+export const CopyToClipboard = ({
+  getValue,
+  ...props
+}: {
+  getValue: () => string
+} & ComponentProps<'button'>): ReactElement => {
+  const [isCopied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (!isCopied) return
+    const timerId = setTimeout(() => {
+      setCopied(false)
+    }, 2000)
+
+    return () => {
+      clearTimeout(timerId)
+    }
+  }, [isCopied])
+
+  const handleClick = useCallback<
+    NonNullable<ComponentProps<'button'>['onClick']>
+  >(async () => {
+    setCopied(true)
+    if (!navigator?.clipboard) {
+      console.error('Access to clipboard rejected!')
+    }
+    try {
+      await navigator.clipboard.writeText(getValue())
+    } catch {
+      console.error('Failed to copy!')
+    }
+  }, [getValue])
+
+  const IconToUse = isCopied ? CheckIcon : CopyIcon
+
+  return (
+    <Button onClick={handleClick} title="Copy code" tabIndex={0} {...props}>
+      <IconToUse className="nextra-copy-icon nx-pointer-events-none nx-h-4 nx-w-4" />
+    </Button>
+  )
+}

components/copy.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, ReactElement } from 'react'
+
+export function CopyIcon(props: ComponentProps<'svg'>): ReactElement {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      {...props}
+    >
+      <rect
+        x="9"
+        y="9"
+        width="13"
+        height="13"
+        rx="2"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

components/pre.tsx

@@ -0,0 +1,82 @@
+import cn from 'clsx'
+import type { ComponentProps, ReactElement } from 'react'
+import { useCallback, useRef } from 'react'
+import { WordWrapIcon } from './word-wrap'
+import { Button } from './button'
+import { CopyToClipboard } from './copy-to-clipboard'
+import React from 'react'
+
+
+export const Pre = ({
+  children,
+  className,
+  hasCopyCode = true,
+  filename,
+  ...props
+}: ComponentProps<'pre'> & {
+  filename?: string
+  hasCopyCode?: boolean
+}): ReactElement => {
+  const preRef = useRef<HTMLPreElement | null>(null);
+
+  const toggleWordWrap = useCallback(() => {
+    const htmlDataset = document.documentElement.dataset;
+    const hasWordWrap = 'nextraWordWrap' in htmlDataset;
+    if (hasWordWrap) {
+      delete htmlDataset.nextraWordWrap;
+    } else {
+      htmlDataset.nextraWordWrap = '';
+    }
+  }, []);
+
+  const renderChildren = () => {
+    if (React.isValidElement(children) && children.type === 'code') {
+      return children.props.children;
+    }
+    return children;
+  };
+
+  return (
+    <div className="nextra-code-block nx-relative nx-mt-6 first:nx-mt-0">
+      {filename && (
+        <div className="nx-absolute nx-top-0 nx-z-[1] nx-w-full nx-truncate nx-rounded-t-xl nx-bg-primary-700/5 nx-py-2 nx-px-4 nx-text-xs nx-text-gray-700 dark:nx-bg-primary-300/10 dark:nx-text-gray-200">
+          {filename}
+        </div>
+      )}
+      <pre
+        className={cn(
+          'nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em]',
+          'contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40',
+          filename ? 'nx-pt-12 nx-pb-4' : 'nx-py-4',
+          className
+        )}
+        ref={preRef}
+        {...props}
+      >
+        {renderChildren()}
+      </pre>
+      <div
+        className={cn(
+          'nx-opacity-0 nx-transition [div:hover>&]:nx-opacity-100 focus-within:nx-opacity-100',
+          'nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0',
+          filename ? 'nx-top-8' : 'nx-top-0'
+        )}
+      >
+        <Button
+          onClick={toggleWordWrap}
+          className="md:nx-hidden"
+          title="Toggle word wrap elvis"
+        >
+          <WordWrapIcon className="nx-pointer-events-none nx-h-4 nx-w-4" />
+        </Button>
+        {hasCopyCode && (
+          <CopyToClipboard
+            getValue={() =>
+              preRef.current?.querySelector('code')?.textContent || ''
+            }
+          />
+        )}
+      </div>
+    </div>
+  );
+}

components/word-wrap.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps, ReactElement } from 'react'
+
+export function WordWrapIcon(props: ComponentProps<'svg'>): ReactElement {
+  return (
+    <svg viewBox="0 0 24 24" width="24" height="24" {...props}>
+      <path
+        fill="currentColor"
+        d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
+      />
+    </svg>
+  )
+}