add CodePen demo

Author: jcubic

docs/docs/intro.mdx

@@ -215,6 +215,12 @@ $('body').terminal({
 
 If you type `h` and press `<TAB>` it will complete the command and insert `ello`.
 
+## Demo
+
+import CodePen from '@site/src/CodePen';
+
+<CodePen id="EaYWYMp" title="Basic terminal" />
+
 ## See also
 
 * [What you can echo?](#???)

docs/src/CodePen.tsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+type CodePenProps = {
+  id: string;
+  title: string;
+};
+
+export default function CodePen({ id, title }: CodePenProps) {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://cpwebassets.codepen.io/assets/embed/ei.js';
+    script.async = true;
+    document.body.appendChild(script);
+  }, []);
+  return (
+    <p className="codepen"
+       data-height="300"
+       data-default-tab="result"
+       data-slug-hash={id}
+       data-pen-title={title}
+       data-user="jcubic"
+       style={{
+         height: 300,
+         boxSizing: 'border-box',
+         display: 'flex',
+         alignItems: 'center',
+         justifyContent: 'center',
+         border: '2px solid',
+         margin: '1em 0',
+         padding: '1em'
+       }}>
+      <span>See the Pen <a href={`https://codepen.io/jcubic/pen/${id}`}>
+        {title}</a> by Jakub T. Jankiewicz (<a href="https://codepen.io/jcubic">@jcubic</a>)
+        {' '}on <a href="https://codepen.io">CodePen</a>.</span>
+    </p>
+  );
+}