feat: Add copy-to-clipboard button to all code blocks

Author: ishansasika

demo/src/components/common/CodeBlock.tsx

@@ -1,4 +1,5 @@
 import { Highlight, themes } from 'prism-react-renderer';
+import { CopyButton } from './CopyButton';
 
 interface CodeBlockProps {
   code: string;
@@ -14,7 +15,10 @@ export function CodeBlock({
   fileName,
 }: CodeBlockProps) {
   return (
-    <div className="code-block rounded-lg overflow-hidden bg-gray-900">
+    <div className="code-block rounded-lg overflow-hidden bg-gray-900 relative group">
+      <div className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
+        <CopyButton text={code.trim()} />
+      </div>
       {fileName && (
         <div className="px-4 py-2 bg-gray-800 text-gray-300 text-sm font-mono border-b border-gray-700">
           {fileName}

demo/src/components/playground/ComponentPlayground.tsx

@@ -7,7 +7,6 @@ import { SelectControl } from './controls/SelectControl';
 import { BooleanControl } from './controls/BooleanControl';
 import { TextControl } from './controls/TextControl';
 import { CodeBlock } from '../common/CodeBlock';
-import { CopyButton } from '../common/CopyButton';
 import { ThemeSwitch } from '../common/ThemeSwitch';
 import { useTheme, THEME_COLORS } from '../../contexts/ThemeContext';
 import { generateComponentCode, generateImportStatement } from '../../utils/codeGenerator';
@@ -147,10 +146,7 @@ function App() {
 
       {/* Code */}
       <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold">Code</h3>
-          <CopyButton text={generatedCode} />
-        </div>
+        <h3 className="text-lg font-semibold mb-2">Code</h3>
         <CodeBlock code={generatedCode} language="tsx" />
       </div>