Improve interactive examples

clauderic · Nov 10, 2024 · f599bfb · f599bfb
1 parent 4b97ec4
commit f599bfb
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 26 deletions.
diff --git a/apps/docs/react/hooks/use-draggable.mdx b/apps/docs/react/hooks/use-draggable.mdx
@@ -7,17 +7,13 @@ icon: 'bullseye-pointer'
 import {Story} from '/snippets/story.mdx';
 import {CodeSandbox} from '/snippets/code.mdx';
 
-<Story id="react-draggable--example" height="125" hero />
-
-## Usage
-
-The `useDraggable` hook requires an `id` and accepts all the same options as the `Draggable` class. Refer to the [Input](#input) section below for more information.
-
 <CodeSandbox files={{
   'App.js': {code: app, hidden: true},
   'Draggable.js': {code, active: true},
   'styles.css': {code: styles, hidden: true},
-}} height={220} previewHeight={140} />
+}} height={220} previewHeight={200} hero />
+
+The `useDraggable` hook requires an `id` and accepts all the same options as the `Draggable` class. Refer to the [Input](#input) section below for more information.
 
 ## API Reference
 

diff --git a/apps/docs/sandpack.js b/apps/docs/sandpack.js
@@ -70,22 +70,6 @@ class SandpackElement extends HTMLElement {
       files = JSON.parse(this.getAttribute("files"));
     } catch {}
 
-    const styles = files['styles.css'];
-    const backgroundColor = document.documentElement.classList.contains('dark')
-      ? '#11131b'
-      : '#fafafd';
-
-    if (styles) {
-      const background = \`html {background-color: \${backgroundColor};}\`;
-
-      files['styles.css'] = typeof styles == 'string' ? {
-        code: \`\${background} \${styles}\`,
-      } : {
-        ...styles,
-        code: \`\${background} \${styles.code}\`,
-      };
-    }
-
     const sandpackComponent = React.createElement(Sandpack, {
       files,
       template: "react",
@@ -107,7 +91,7 @@ class SandpackElement extends HTMLElement {
 }
 
 customElements.define("code-sandbox", SandpackElement);
-`.replace(/\n/g, ' ');
+`;
 
 script.type = 'module';
 script.innerText = code;

diff --git a/apps/docs/snippets/code.mdx b/apps/docs/snippets/code.mdx
@@ -1,9 +1,9 @@
-export const CodeSandbox = ({ files, height, previewHeight, showTabs }) => {
+export const CodeSandbox = ({ files, height, previewHeight, showTabs, hero }) => {
   const Element = 'code-sandbox';
 
   return (
     <Element
-      class="not-prose"
+      class={`not-prose${hero ? ' hero' : ''}`}
       files={JSON.stringify(files)}
       height={height}
       style={previewHeight ? {'--preview-height': `${previewHeight}px`} : undefined}

diff --git a/apps/docs/style.css b/apps/docs/style.css
@@ -117,6 +117,11 @@ kbd {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+html:not(.dark) .hero .sp-layout {
+  box-shadow: none;
+}
+
+
 .sp-tabs-scrollable-container {
   padding-left: 0;
   padding-right: 0;
@@ -131,6 +136,10 @@ kbd {
   border-color: rgb(var(--primary-light));
 }
 
+.sp-layout {
+  gap: 0px;
+}
+
 .dark .sp-layout {
   --tw-ring-color: rgb(var(--gray-800) / 0.5);
 }
@@ -140,6 +149,10 @@ kbd {
   order: 1;
 }
 
+.sp-preview {
+  flex-basis: 100% !important;
+}
+
 .sp-preview, .sp-preview-container {
   background-color: transparent;
 }
@@ -151,3 +164,57 @@ kbd {
 code-sandbox[style*="--preview-height"] .sp-preview {
   height: var(--preview-height) !important;
 }
+
+.sp-preview-container, .sp-overlay {
+  background-color: #fafafd;
+}
+
+.dark .sp-preview-container, .dark .sp-overlay {
+  background-color: #11131b;
+}
+
+.sp-preview-container iframe {
+  background: transparent;
+  color-scheme: normal;
+}
+
+.hero .sp-preview-container, .hero .sp-overlay {
+  --gradient: linear-gradient(65deg, #56fff420, #001AFF20, #5F6AF220, #F25FD020, #56FFF520, #F25FD020, #001AFF20, #56fff420);
+  background-image: var(--gradient);
+  animation: background 16s linear infinite;
+  animation-direction: alternate;
+  background-size: 600% 100%;
+}
+
+.dark .hero .sp-preview-container, .dark .hero .sp-overlay {
+  --gradient: linear-gradient(65deg, #56fff480, #001AFF80, #5F6AF280, #F25FD080, #56FFF580, #F25FD080, #001AFF80, #56fff480);
+  animation: gradient 16s linear infinite;
+}
+
+
+@keyframes gradient {
+  0% {
+    background-color: #ff0000;
+  }
+  25% {
+    background-color: #7f00ff;
+  }
+  50% {
+    background-color: #00affa;
+  }
+  75% {
+    background-color: #00f594;
+  }
+  100% {
+    background-color: #ff0000
+  }
+}
+
+@keyframes background-position {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}