123 lines
2.6 KiB
Vue
123 lines
2.6 KiB
Vue
<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>
|
|
<select class="version-select" v-model="xocashLibs['@xocash/stack'].selectedVersion">
|
|
<option v-for="version in xocashLibs['@xocash/stack'].versions" :key="version" :value="version">{{ version }}</option>
|
|
</select>
|
|
<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
|
|
:libs="xocashLibs"
|
|
:isDark="isDark"
|
|
>
|
|
<slot></slot>
|
|
</CodeSandbox>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { useData } from 'vitepress';
|
|
|
|
import { useXOCashLibs } from '../utils/useXOCashLibs';
|
|
import CodeSandbox from './CodeSandbox.vue'
|
|
|
|
const xocashLibs = useXOCashLibs();
|
|
|
|
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 scoped>
|
|
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;
|
|
}
|
|
.version-select {
|
|
margin-right: 10px;
|
|
background-color: var(--vp-c-bg);
|
|
color: var(--vp-c-text-1);
|
|
border: 1px solid var(--vp-c-border);
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
font-size: 14px;
|
|
font-family: var(--vp-font-family-base);
|
|
}
|
|
</style>
|