docs: add version select (#532)

docs/components/BranchSelect.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="mb-3 lg:mb-6">
+    <label for="branch" class="block mb-1.5 font-semibold text-sm/6">Version</label>
+
+    <USelectMenu
+      id="branch"
+      :model-value="branch"
+      name="branch"
+      :options="branches"
+      color="gray"
+      :ui="{ icon: { trailing: { padding: { sm: 'pe-1.5' } } } }"
+      :ui-menu="{ option: { container: 'gap-1.5' } }"
+      @update:model-value="selectBranch"
+    >
+      <template #label>
+        <UIcon v-if="branch.icon" :name="branch.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
+
+        <span class="font-medium">{{ branch.label }}</span>
+
+        <span class="truncate text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>
+      </template>
+
+      <template #option="{ option }">
+        <UIcon v-if="option.icon" :name="option.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
+
+        <span class="font-medium">{{ option.label }}</span>
+
+        <span class="truncate text-gray-400 dark:text-gray-500">{{ option.suffix }}</span>
+      </template>
+    </USelectMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+const { branches, branch } = useContentSource()
+
+function selectBranch (branch) {
+  if (branch.name === 'dev') {
+    if (route.path.startsWith('/dev')) {
+      return
+    }
+
+    router.push(`/dev${route.path}`)
+  } else {
+    router.push(route.path.replace('/dev', ''))
+  }
+}
+</script>