Expose preview component

Author: pomber

packages/mdx/src/client/preview.tsx

@@ -8,13 +8,43 @@ import {
 import { EditorStep } from "@code-hike/mini-editor"
 
 export type PresetConfig = SandboxInfo
-
 export function Preview({
   className,
   files,
   presetConfig,
+  show,
+  children,
+  ...rest
 }: {
   className: string
+  files: EditorStep["files"]
+  presetConfig?: PresetConfig
+  show?: string
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      className={
+        "ch-preview" + (className ? " " + className : "")
+      }
+      {...rest}
+    >
+      {!presetConfig ? (
+        <MiniBrowser loadUrl={show} children={children} />
+      ) : (
+        <SandpackPreview
+          files={files}
+          presetConfig={presetConfig}
+        />
+      )}
+    </div>
+  )
+}
+
+function SandpackPreview({
+  files,
+  presetConfig,
+}: {
   files: EditorStep["files"]
   presetConfig: PresetConfig
 }) {
@@ -46,7 +76,7 @@ export function Preview({
   }, [files])
 
   return (
-    <MiniBrowser className={className}>
+    <MiniBrowser>
       <iframe ref={iframeRef} />
     </MiniBrowser>
   )

packages/mdx/src/components.tsx

@@ -11,6 +11,7 @@ import {
   annotationsMap,
   Annotation,
 } from "./client/annotations"
+import { Preview } from "./client/preview"
 
 export const CH = {
   Code,
@@ -19,6 +20,7 @@ export const CH = {
   SectionCode,
   Spotlight,
   Scrollycoding,
+  Preview,
   annotations: annotationsMap,
   Annotation,
   Slideshow,

packages/mdx/src/index.scss

@@ -5,15 +5,15 @@
 @import "./client/slideshow.scss";
 
 .ch-codeblock,
-.ch-codegroup {
+.ch-codegroup,
+.ch-preview {
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
     0 8px 16px -8px rgba(0, 0, 0, 0.3),
     0 -6px 16px -6px rgba(0, 0, 0, 0.025);
-}
 
-.ch-codeblock > *,
-.ch-codegroup > * {
-  height: 100%;
+  & > * {
+    height: 100%;
+  }
 }

packages/mini-frame/src/index.scss

@@ -1,9 +1,9 @@
 .ch-frame {
-  border-radius: 6px;
-  overflow: hidden;
-  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
-    0 8px 16px -8px rgba(0, 0, 0, 0.3),
-    0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+  // border-radius: 6px;
+  // overflow: hidden;
+  // box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
+  //   0 8px 16px -8px rgba(0, 0, 0, 0.3),
+  //   0 -6px 16px -6px rgba(0, 0, 0, 0.025);
   font-family: Ubuntu, Droid Sans, -apple-system,
     BlinkMacSystemFont, Segoe WPC, Segoe UI, sans-serif;
   height: 100%;

packages/playground/content/simple-code.mdx

@@ -84,3 +84,5 @@ function lorem(ipsum, dolor = 1) {
     : []
 }
 ```
+
+<CH.Preview show="/" style={{ height: 200 }} />