Try a first version of Copy

apps/frontpage/components/docs/mdx/code-snippets/code-snippets.tsx

@@ -63,6 +63,7 @@ export const CodeSnippetsComponent: FC<CodeSnippetsClientProps> = ({
 
   return (
     <CodeWrapper
+      copy={activeContent?.content}
       options={
         <>
           {filters && filters.languages.length > 1 ? (

apps/frontpage/components/docs/mdx/code-snippets/copy.tsx

@@ -1,14 +1,20 @@
 'use client';
 
 import { CheckIcon, CopyIcon } from '@storybook/icons';
+import { renderToStaticMarkup } from 'react-dom/server';
+import type { ReactNode } from 'react';
 import { useState } from 'react';
 import copy from 'copy-to-clipboard';
 
-export const Copy = () => {
+export const Copy = ({ content }: { content: ReactNode }) => {
   const [state, setState] = useState<'idle' | 'copied'>('idle');
 
   const onClick = () => {
-    copy('Text Boom!');
+    const textToConvertIntoString = renderToStaticMarkup(content);
+    copy(textToConvertIntoString, {
+      debug: true,
+      // format: 'text/html',
+    });
     setState('copied');
     setTimeout(() => {
       setState('idle');

apps/frontpage/components/docs/mdx/code-snippets/wrapper.tsx

@@ -1,27 +1,29 @@
-import type { FC, ReactNode } from "react";
-import { TSIcon } from "./icons";
-import { Copy } from "./copy";
+import type { FC, ReactNode } from 'react';
+import { TSIcon } from './icons';
+import { Copy } from './copy';
 
 interface CodeWrapperProps {
   options?: ReactNode;
   children: ReactNode;
   title?: string;
+  copy?: ReactNode;
 }
 
 export const CodeWrapper: FC<CodeWrapperProps> = ({
   options,
   children,
   title,
+  copy,
 }) => {
   return (
     <div className="border border-zinc-300 rounded overflow-hidden mb-6 w-full">
       <div className="flex items-center justify-between py-2 pl-5 pr-4 border-b border-b-zinc-300 bg-slate-50">
         <div className="flex items-center gap-2 font-bold text-sm">
-          <TSIcon /> {title || ""}
+          <TSIcon /> {title || ''}
         </div>
         <div className="flex items-center gap-2">
           {options}
-          <Copy />
+          {copy ? <Copy content={copy} /> : null}
         </div>
       </div>
       <div className="p-4 text-sm max-w-full overflow-scroll">{children}</div>

apps/frontpage/components/docs/mdx/pre.tsx

@@ -7,7 +7,7 @@ interface PreProps {
 
 export const Pre: FC<PreProps> = ({ children }) => {
   return (
-    <CodeWrapper>
+    <CodeWrapper copy={children}>
       <pre>{children}</pre>
     </CodeWrapper>
   );