Merge pull request #2 from internet-identity-labs/feature/stack-blitz

chore(examples): setup StackBlitz component
internet-identity-labs · Dec 4, 2023 · 94631d3 · 94631d3
2 parents f81c41d + 4c2cc3b
commit 94631d3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/docs/components/stack-blitz.tsx b/docs/components/stack-blitz.tsx
@@ -0,0 +1,20 @@
+export const StackBlitz = (props: {
+  name: string
+  height?: number
+  view?: 'preview' | 'editor'
+  openFile?: string
+  hideExplorer?: boolean
+  showDevtools?: boolean
+}) => {
+  return (
+    <iframe
+      src={`https://stackblitz.com/edit/${props.name}?embed=1&hideExplorer=${
+        props.hideExplorer ? 1 : 0
+      }&file=${props.openFile}&view=${props.view}&devToolsHeight=${
+        props.showDevtools ? '50' : '0'
+      }`}
+      height={props.height || 600}
+      style={{ width: '100%', borderRadius: '7px', margin: '2em 0' }}
+    />
+  )
+}
diff --git a/docs/pages/examples/vanilla-javascript.mdx b/docs/pages/examples/vanilla-javascript.mdx
@@ -0,0 +1,5 @@
+import { StackBlitz } from '../../components/stack-blitz'
+
+# Vanilla JS Example
+
+<StackBlitz name="js-1sexbs" openFile="Input/Input.tsx" />