feat: code group for eip-6963 page

app/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
 		NConfigProvider: (typeof import('naive-ui'))['NConfigProvider']
 		NDrawer: (typeof import('naive-ui'))['NDrawer']
 		NDrawerContent: (typeof import('naive-ui'))['NDrawerContent']
+		NIcon: (typeof import('naive-ui'))['NIcon']
 		NInputNumber: (typeof import('naive-ui'))['NInputNumber']
 		NLayout: (typeof import('naive-ui'))['NLayout']
 		NLayoutFooter: (typeof import('naive-ui'))['NLayoutFooter']
@@ -20,6 +21,8 @@ declare module 'vue' {
 		NListItem: (typeof import('naive-ui'))['NListItem']
 		NMenu: (typeof import('naive-ui'))['NMenu']
 		NSkeleton: (typeof import('naive-ui'))['NSkeleton']
+		NTabPane: (typeof import('naive-ui'))['NTabPane']
+		NTabs: (typeof import('naive-ui'))['NTabs']
 		RouterLink: (typeof import('vue-router'))['RouterLink']
 		RouterView: (typeof import('vue-router'))['RouterView']
 	}

app/components/content/CodeGroup.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { RendererElement, RendererNode } from 'vue'
+import { ContentCopyFilled } from '@vicons/material'
+import copy from 'copy-to-clipboard'
+
+const slots = useSlots()
+
+type Slot = VNode<
+	RendererNode,
+	RendererElement,
+	{
+		[key: string]: any
+		props?: SlotProps
+	}
+>
+
+type SlotProps = {
+	class: string
+	code: string
+	filename: string
+	language: string
+	meta: string
+	style: string
+}
+
+function isTag(slot: any, tag: string) {
+	return slot.type && slot.type.tag && slot.type.tag === tag
+}
+
+function isCodeTag(slot: Slot) {
+	return isTag(slot, 'code-block') || isTag(slot, 'code') || isTag(slot, 'pre')
+}
+
+const defaultSlots = computed<Slot[]>(() => {
+	const res = slots.default?.() || []
+	// console.log(res)
+	return res
+})
+
+const tabs = computed(() => {
+	return defaultSlots.value
+		.filter(slot => isCodeTag(slot))
+		.map((slot, index) => {
+			return {
+				label: slot.props?.filename || slot.props?.label || `${index}`,
+				language: slot.props?.language || null,
+				active: slot.props?.active || false,
+				component: slot,
+			}
+		})
+})
+
+const activeTabIndex = ref(0)
+</script>
+
+<template>
+	<div>
+		<n-tabs v-model:value="activeTabIndex" type="card" size="small" :tabs-padding="5">
+			<n-tab-pane v-for="(tab, index) in tabs" :key="index" :name="index" :tab="tab.label" style="padding: 0">
+				<div
+					v-for="(slot, index) in defaultSlots"
+					:key="index"
+					:style="{ display: index === activeTabIndex ? 'block' : 'none' }"
+				>
+					<div v-if="isCodeTag(slot)">
+						<component class="m-0" :is="slot" />
+					</div>
+				</div>
+			</n-tab-pane>
+
+			<template #suffix>
+				<n-button text class="mr-3 text-lg" @click="copy(defaultSlots[activeTabIndex].props?.code)">
+					<n-icon>
+						<ContentCopyFilled />
+					</n-icon>
+				</n-button>
+			</template>
+		</n-tabs>
+	</div>
+</template>
+
+<style scoped>
+:deep(.n-tabs-nav) {
+	--n-tab-text-color-active: #42b883;
+}
+</style>

app/content/eip-6963.md

@@ -25,6 +25,8 @@ Using window events to announce [EIP-1193](https://eips.ethereum.org/EIPS/eip-11
 
 - [source code link](https://github.com/vu3th/vue-dapp/blob/main/app/components/content/Eip6963.client.vue){:target="_blank"}
 
+::code-group
+
 ```ts [setup script]
 import { useVueDapp, shortenAddress, type ConnectorName, RDNS } from '@vue-dapp/core'
 import { useVueDappModal } from '@vue-dapp/modal'
@@ -96,3 +98,5 @@ async function onClickWallet(connName: ConnectorName, rdns?: RDNS | string) {
 	</div>
 </template>
 ```
+
+::

app/content/test.md

@@ -8,7 +8,32 @@ head:
 
 # Template
 
-## header 2
+## Code Group
+
+::code-group
+
+```js [config.js]
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+const config = {
+  // ...
+}
+
+export default config
+```
+
+```ts [config.ts]
+import type { UserConfig } from 'vitepress'
+
+const config: UserConfig = {
+  // ...
+}
+
+export default config
+```
+
+::
 
 ### header 3
 

app/package.json

@@ -18,6 +18,7 @@
 		"@pinia/nuxt": "^0.5.1",
 		"@tailwindcss/typography": "^0.5.12",
 		"@vicons/ionicons5": "^0.12.0",
+		"@vicons/material": "^0.12.0",
 		"@vue-dapp/coinbase": "workspace:^",
 		"@vue-dapp/core": "workspace:^",
 		"@vue-dapp/modal": "workspace:^",