feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/components/content/ComponentProps.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <table class="table-fixed">
+      <thead>
+        <tr>
+          <th class="w-[25%]">
+            Prop
+          </th>
+          <th class="w-[50%]">
+            Default
+          </th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="prop in metaProps" :key="prop.name">
+          <td class="relative flex-shrink-0">
+            <code>{{ prop.name }}</code><span v-if="prop.required" class="font-bold text-red-500 dark:text-red-400 absolute top-0 ml-1">*</span>
+          </td>
+          <td>
+            <code v-if="prop.default">{{ prop.default }}</code>
+          </td>
+          <td>
+            <a v-if="prop.name === 'ui'" href="#preset">
+              <code>{{ prop.type }}</code>
+            </a>
+            <code v-else class="break-all">
+              {{ prop.type }}
+            </code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  }
+})
+
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const meta = await fetchComponentMeta(name)
+
+const metaProps = computed(() => useSortBy(meta?.meta?.props || [], [
+  prop => ['string', 'number', 'boolean', 'any'].indexOf(prop.type)
+]))
+</script>