Merge pull request #177 from codesandbox/feat/vertical-sandpack

Vertical component for nested sandpack on the documentation
codesandbox · Nov 25, 2021 · 2f50573 · 2f50573
2 parents ec4005a + 9713568
commit 2f50573
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 20 deletions.
diff --git a/website/docs/src/NestedSandpack.tsx b/website/docs/src/NestedSandpack.tsx
@@ -1,4 +1,4 @@
-import { Sandpack } from "./CustomSandpack";
+import { Sandpack, SandpackLayout } from "./CustomSandpack";
 import React from "react";
 
 const indexCode = `import React, { StrictMode } from "react";
@@ -41,25 +41,24 @@ export default function App() {
 }
 `;
   return (
-    <Sandpack
-      template="react"
-      files={{
-        "/App.js": appCode,
-        "/index.js": {
-          code: indexCode,
-          hidden: true,
-        },
-      }}
-      options={{
-        editorHeight: 500,
-      }}
-      customSetup={{
-        dependencies: {
-          "@codesandbox/sandpack-react": "^0.3.3",
-        },
-      }}
-      {...props}
-    />
+    <div className="nestedSandpack">
+      <Sandpack
+        template="react"
+        files={{
+          "/App.js": appCode,
+          "/index.js": {
+            code: indexCode,
+            hidden: true,
+          },
+        }}
+        customSetup={{
+          dependencies: {
+            "@codesandbox/sandpack-react": "^0.3.3",
+          },
+        }}
+        {...props}
+      />
+    </div>
   );
 };
 

diff --git a/website/docs/src/scss/_code.scss b/website/docs/src/scss/_code.scss
@@ -19,3 +19,32 @@ code {
   --sp-colors-fg-active: #f0fdaf;
   display: block;
 }
+
+.nestedSandpack > .sp-wrapper > .sp-layout {
+  display: block;
+}
+
+.nestedSandpack > .sp-wrapper > .sp-layout .sp-stack + .sp-stack {
+  height: 400px;
+}
+
+.sp-wrapper *::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+/* Track */
+.sp-wrapper *::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0);
+}
+
+/* Handle */
+.sp-wrapper *::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 9999px;
+}
+
+/* Handle on hover */
+.sp-wrapper *::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}