初次提交旧的文档与blog

docs/1.简单文档/5.components/playground.md

@@ -0,0 +1,82 @@
+---
+title: Playground
+icon: lucide:app-window
+navBadges:
+  - value: New
+    type: lime
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Playground.vue
+    target: _blank
+---
+
+## Usage
+
+### Stackblitz
+
+::stack
+  ::div{class="p-4"}
+    ::playground
+    ---
+    provider: stackblitz
+    repo: nuxt/starter
+    branch: v3
+    file: app.vue
+    ---
+    ::
+  ::
+  ```mdc
+  ::playground
+  ---
+  provider: stackblitz
+  repo: nuxt/starter
+  branch: v3
+  file: app.vue
+  ---
+  ::
+  ```
+::
+
+### CodeSandbox
+
+::stack
+  ::div{class="p-4"}
+    ::playground
+    ---
+    provider: codesandbox
+    repo: nuxt/starter
+    branch: v3
+    file: app.vue
+    ---
+    ::
+  ::
+  ```mdc
+  ::playground
+  ---
+  provider: codesandbox
+  repo: nuxt/starter
+  branch: v3
+  file: app.vue
+  ---
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="provider" type="'stackblitz' | 'codesandbox'"}[Provider to use]
+  :field{name="repo" type="string"}[GitHub repository name (e.g. `nuxt/starter`)]
+  :field{name="branch" type="string" default-value="main"}[Branch name]
+  ::field{name="id" type="string"}
+  Repository ID (e.g. for Stackblitz `github-t1vjvm`, for Codesandbox `8hq5qn`)
+
+    ::alert{icon="lucide:info" type="info"}
+    You need to provide either `repo` or `id` prop, but not both.
+    ::
+  ::
+  :field{name="dir" type="string" default-value="''"}[Directory to open in the playground (optional)]
+  :field{name="file" type="string"}[File path to open]
+  :field{name="title" type="string" default-value="Playground"}[Title of the iframe]
+::