feat(docs): implement playground

typp-js · Nov 13, 2024 · 35e9eb9 · 35e9eb9
1 parent 5e4ab47
commit 35e9eb9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 23 deletions.
diff --git a/docs/.vitepress/components/Playground.client.vue b/docs/.vitepress/components/Playground.client.vue
@@ -39,6 +39,7 @@
 </template>
 <style scoped lang="scss">
 .playground {
+  --radius: 8px;
   --shadow: 0 8px 16px rgba(0, 0, 0, .1);
 
   display: flex;
@@ -52,13 +53,21 @@
   &:hover {
     filter: drop-shadow(var(--shadow));
   }
+  &.xl {
+    .top-bar, .bottom-bar {
+      > .left, > .right {
+        .material-symbols-rounded {
+          padding: 12px;
+          font-size: 24px;
+        }
+      }
+    }
+  }
 }
 .dark .playground {
   --shadow: 0 8px 16px rgba(0, 0, 0, .4);
 }
 .top-bar, .bottom-bar {
-  --radius: 8px;
-
   z-index: 1;
   display: flex;
   align-items: center;

diff --git a/docs/en/playground.md b/docs/en/playground.md
diff --git a/docs/playground.md b/docs/playground.md
diff --git a/docs/zh-Hans/playground.md b/docs/zh-Hans/playground.md
diff --git a/docs/zh-Hans/playground.md b/docs/zh-Hans/playground.md
@@ -0,0 +1,22 @@
+---
+layout: page
+title: Playground
+pageClass: playground-page
+---
+
+<script setup>
+import Playground from '#components/Playground.vue'
+</script>
+
+<Playground
+  style="--radius: 0px; margin-top: 0; height: calc(100vh - 64px);"
+  class="xl"
+>
+
+```ts
+import { t } from '@typp/core'
+
+export default t({ name: String, age: Number })
+```
+
+</Playground>