docs: add Edge badge for next release features

Resolves #277

docs/components/docs/DocsAsideLinks.vue

@@ -10,15 +10,21 @@
         class="mt-1"
         :ui="{
           wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
-          base: 'group block border-l -ml-px lg:leading-6',
+          base: 'group block border-l -ml-px lg:leading-6 flex items-center gap-2',
           padding: 'pl-4',
           rounded: '',
           font: '',
           ring: '',
-          active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
+          active: 'text-primary-500 dark:text-primary-400 border-current',
           inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
         }"
-      />
+      >
+        <template #badge="{ link }">
+          <UBadge v-if="link.badge" size="xs" :ui="{ rounded: 'rounded-full' }">
+            {{ link.badge }}
+          </UBadge>
+        </template>
+      </UVerticalNavigation>
     </div>
   </div>
 </template>
@@ -29,6 +35,6 @@ import type { NavItem } from '@nuxt/content/dist/runtime/types'
 const { navigation } = useContent() as { navigation: NavItem[] }
 
 function mapContentLinks (links: NavItem[]) {
-  return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path })) || []
+  return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path, badge: link.badge })) || []
 }
 </script>

docs/content/4.data/1.table.md

@@ -517,7 +517,7 @@ const selected = ref([people[1]])
 ```
 ::
 
-### `empty-state`
+### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom"}
 
 Use the `#empty-state` slot to customize the empty state.
 

docs/content/5.navigation/3.pagination.md

@@ -1,6 +1,8 @@
 ---
 github: true
 description: Add a pagination to handle pages.
+navigation:
+  badge: 'Edge'
 ---
 
 ## Usage