first commit

xterminal/docs/.vitepress/theme/components/BrowserPreview.vue

@@ -0,0 +1,95 @@
+<script setup>
+const props = defineProps({
+    hidelabel: {
+        type: Boolean,
+        default: () => false
+    }
+})
+</script>
+
+<template>
+    <div>
+        <div v-if="!props.hidelabel" class="bp-preview">
+            <b>Result: </b>
+        </div>
+        <div class="bp-container">
+            <header class="bp-header">
+                <div class="bp-dots">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <div class="bp-title">My First Terminal</div>
+            </header>
+            <main class="bp-main">
+                <slot></slot>
+            </main>
+        </div>
+    </div>
+</template>
+
+<style>
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+}
+
+.bp-preview {
+    margin-bottom: 1rem;
+}
+
+.bp-container {
+    display: flex;
+    flex-direction: column;
+    border-radius: 6px;
+    background-color: var(--vp-code-block-bg);
+    color: var(--vp-c-text-1);
+    overflow: hidden;
+    border: 1px solid var(--vp-c-divider);
+}
+
+.bp-header {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-bottom: 1px solid var(--vp-c-divider);
+}
+.bp-header > .bp-title {
+    flex-grow: 1;
+    text-align: right;
+    font-size: min(15px, calc(1.5vw + 7px));
+}
+.bp-header .bp-dots > * {
+    display: inline-block;
+    width: min(0.65rem, calc(2.25vw));
+    height: min(0.65rem, calc(2.25vw));
+    border-radius: 50%;
+    margin-right: min(0.25rem, calc(1vw));
+}
+.bp-header .bp-dots > *:first-child {
+    background-color: rgba(255, 91, 82, 1);;
+}
+.bp-header .bp-dots > *:nth-child(2) {
+    background-color: rgba(83, 195, 43, 1);
+}
+.bp-header .bp-dots > *:last-child {
+    background-color: rgba(230, 192, 41, 1);
+}
+
+.bp-main {
+    display: flex;
+    flex-direction: column;
+    max-height: 400px;
+    overflow-y: hidden;
+    padding: 0 min(15px, calc(1.5vw + 5px));
+    background-color: rgba(225,225,225,0.05);
+}
+
+html.dark .bp-main {
+    background-color: rgb(41, 40, 40);
+}
+html.dark .bp-container {
+    color: rgba(239, 239, 239, 0.85);
+}
+</style>