初次提交旧的文档与blog

docs/1.简单文档/5.components/code-group.md

@@ -0,0 +1,77 @@
+---
+title: Code Group
+icon: lucide:code-xml
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/code-group
+    target: _blank
+  - value: Docus
+    to: https://docus.dev/api/components#codegroup
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeGroup.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::code-group
+      ```vue [app.vue]
+      <template>
+        <div>
+          <NuxtLayout>
+            <NuxtPage />
+          </NuxtLayout>
+        </div>
+      </template>
+      ```
+
+      ```vue [pages/index.vue]
+      <template>
+        <div>
+          <h1>Welcome to the homepage</h1>
+          <AppAlert>
+            This is an auto-imported component
+          </AppAlert>
+        </div>
+      </template>
+      ```
+    ::
+  ::
+
+  ```mdc
+  ::code-group
+    ```vue [app.vue]
+    <template>
+      <div>
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+      </div>
+    </template>
+    ```
+
+    ```vue [pages/index.vue]
+    <template>
+      <div>
+        <h1>Welcome to the homepage</h1>
+        <AppAlert>
+          This is an auto-imported component
+        </AppAlert>
+      </div>
+    </template>
+    ```
+  ::
+  ```
+::
+
+::alert{to="/components/docs/tabs"}
+`::code-group`{lang="mdc"} is a wrapper around `::tabs{variant="card"}`{lang="mdc"}.
+::
+
+## Props
+
+:field{name="sync" type="string"}[Sync scope for `::tabs`]