add component preview for the code-inline

resend · Oct 14, 2024 · bcb484f · bcb484f
1 parent 19b9a49
commit bcb484f
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/apps/docs/components/code-inline.mdx b/apps/docs/components/code-inline.mdx
@@ -6,6 +6,7 @@ icon: 'code'
 ---
 
 import Support from '/snippets/support.mdx'
+import {ComponentPreview} from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -43,12 +44,38 @@ pnpm add @react-email/code-inline -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { CodeInline } from "@react-email/components";
+
+const Email = () => {
+  return <CodeInline 
+    style={{ 
+      color: "#eee", 
+      padding: "2px 4px",
+      borderRadius: 4,
+      background: "#202020" 
+    }}
+  >
+    @react-email/code-inline
+  </CodeInline>;
+}
+'>
 ```jsx
-import { CodeInline } from "@react-email/code-inline";
+import { CodeInline } from "@react-email/components";
 
 const Email = () => {
-    return <CodeInline>@react-email/code-inline</CodeInline>;
+  return <CodeInline 
+    style={{ 
+      color: "#eee", 
+      padding: "2px 4px",
+      borderRadius: 4,
+      background: "#202020" 
+    }}
+  >
+    @react-email/code-inline
+  </CodeInline>;
 }
 ```
+</ComponentPreview>
 
 <Support/>