Add codesandbox

2025-04-07 05:55:06 +00:00
parent 5623b9b27c
commit afce97e34c
9 changed files with 866 additions and 29 deletions
@@ -0,0 +1,104 @@
+<template>
+  <div id="playground">
+    <div class="top">
+      <div class="logo">
+        <img class="light-only" src="/logo-light.svg" alt="XO Stack Logo">
+        <img class="dark-only" src="/logo-dark.svg" alt="XO Stack Logo">
+        XO Stack - Playground
+      </div>
+      <div class="button-container">
+        <button class="primary-button" @click="shareCode">Share</button>
+        <button class="primary-button" @click="executeCode">Run Code</button>
+      </div>
+    </div>
+    <CodeSandbox
+      ref="sandbox"
+      height="100vh"
+      editorHeight="80%"
+      outputHeight="20%"
+      fullHeight
+      hideRunButton
+    >
+      <slot></slot>
+    </CodeSandbox>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useData } from 'vitepress';
+
+import CodeSandbox from '@theme/components/CodeSandbox.vue'
+
+const { isDark } = useData();
+
+const sandbox = ref<InstanceType<typeof CodeSandbox> | null>(null);
+
+async function executeCode() {
+  sandbox.value.executeCode();
+}
+
+async function shareCode() {
+  sandbox.value.shareCode()
+}
+</script>
+
+<style>
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: Arial, sans-serif;
+}
+#playground {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+.top {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-button-brand-bg);
+
+}
+.logo {
+display: flex; align-items: center;
+  font-size: 16px;
+  margin-right: auto;
+  font-family: var(--vp-font-family-base);
+}
+.logo img {
+  margin-right: 10px;
+  height: 50px;
+}
+.row {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+.left {
+  width: 80%;
+  height: 100%;
+  border-right: 1px solid #ddd;
+}
+.right {
+  width: 20%;
+  height: 100%;
+  overflow: auto;
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: #1e1e1e;
+  color: #ddd;
+  font-family: 'Consolas', monospace;
+}
+#monaco-editor-container {
+  width: 100%;
+  height: 100%;
+}
+.console-output {
+  white-space: pre-wrap;
+}
+</style>