docs: add ComponentCode component

docs/app/components/content/ComponentTheme.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import json5 from 'json5'
 import { camelCase } from 'scule'
-import { parseMarkdown } from '@nuxtjs/mdc/runtime'
 import * as theme from '#build/ui'
 
 const route = useRoute()
@@ -14,7 +13,7 @@ function stripCompoundVariants(component) {
   if (component.compoundVariants) {
     component.compoundVariants = component.compoundVariants.filter((compoundVariant: any) => {
       if (compoundVariant.color) {
-        if (!['primary', 'gray', 'black', 'white'].includes(compoundVariant.color)) {
+        if (!['primary', 'gray'].includes(compoundVariant.color)) {
           strippedCompoundVariants.value = true
 
           return false
@@ -34,19 +33,19 @@ const component = computed(() => {
   return stripCompoundVariants(component)
 })
 
-const { data: ast } = await useAsyncData<any>(`${name}-theme`, () => parseMarkdown(`
+const { data: ast } = await useAsyncData(`${name}-theme`, () => parseMarkdown(`
 \`\`\`yml
 ${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
 \`\`\`\
 
 ${strippedCompoundVariants.value
 ? `
-::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/theme/${name}.ts" :ui='{ "icon": "text-gray-900 dark:text-white" }'}
+::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/theme/${name}.ts"}
 Some colors in \`compoundVariants\` are omitted for readability. Check out the source code on GitHub.
 ::`
 : ''}
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 You can customize this component in your \`app.config.ts\` under \`ui.${name}\` key.
 ::
 `))