Merge pull request #17 from cwandev/refactor/code-block

refactor: rewrite code-block component

Author: cwandev

apps/test/app/examples/code-block.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CodeBlock } from '@repo/elements/code-block'
+import { CodeBlock, CodeBlockCopyButton } from '@repo/elements/code-block'
 
 const code = `<template>
   <div>
@@ -15,8 +15,22 @@ interface Props {
 
 defineProps<Props>()
 <\/script>`
+
+function handleCopy() {
+  // eslint-disable-next-line no-console
+  console.log('Copied code to clipboard')
+}
+
+function handleError(error: Error) {
+  console.error('Failed to copy code to clipboard', error)
+}
 </script>
 
 <template>
-  <CodeBlock :code="code" lang="vue" />
+  <CodeBlock :code="code" language="vue">
+    <CodeBlockCopyButton
+      @copy="handleCopy"
+      @error="handleError"
+    />
+  </CodeBlock>
 </template>

apps/www/assets/css/tailwind.css

@@ -119,4 +119,11 @@
   }
 }
 
-
+@layer components {
+  /* Override shadcn-docs-nuxt's .shiki code span.line styles
+    to prevent conflicts with code-block component preview */
+  .docs-component-preview .shiki code span.line {
+    min-height: 0 !important;
+    line-height: 0 !important;
+  }
+}

apps/www/components/ComponentViewer.vue

@@ -11,7 +11,9 @@ defineProps<Props>()
   <ClientOnly>
     <Suspense>
       <template #default>
-        <component :is="componentName" />
+        <div class="docs-component-preview">
+          <component :is="componentName" />
+        </div>
       </template>
       <template #fallback>
         <div class="p-4" />

apps/www/content/1.overview/1.Introduction.md

@@ -63,4 +63,7 @@ You can install it with:
 :::ComponentLoader{label="InlineCitation" componentName="InlineCitation"}
 :::
 
+:::ComponentLoader{label="CodeBlock" componentName="CodeBlock"}
+:::
+
 View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.