From 6f1f9f4d819010563b000e59be8cb578b8f79871 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 5 Dec 2024 23:36:02 +0100
Subject: [PATCH] docs(app): update module & framework select

---
 docs/app/components/FrameworkSelect.vue | 5 ++++-
 docs/app/components/ModuleSelect.vue    | 2 +-
 docs/app/composables/useSharedData.ts   | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/FrameworkSelect.vue b/docs/app/components/FrameworkSelect.vue
index ae601fe8..45410632 100644
--- a/docs/app/components/FrameworkSelect.vue
+++ b/docs/app/components/FrameworkSelect.vue
@@ -14,7 +14,10 @@ onMounted(() => {
     :items="frameworks"
     :content="false"
     color="neutral"
-    :ui="{ leadingIcon: 'group-data-[state=inactive]:grayscale' }"
+    :ui="{
+      indicator: 'bg-[var(--ui-bg)]',
+      trigger: 'px-1 data-[state=active]:text-[var(--ui-text-highlighted)]'
+    }"
     @update:model-value="(framework = $event as string)"
   />
 </template>
diff --git a/docs/app/components/ModuleSelect.vue b/docs/app/components/ModuleSelect.vue
index bd555fda..88361684 100644
--- a/docs/app/components/ModuleSelect.vue
+++ b/docs/app/components/ModuleSelect.vue
@@ -14,7 +14,7 @@ onMounted(() => {
     :items="modules"
     :content="false"
     color="neutral"
-    :ui="{ trigger: 'px-1' }"
+    :ui="{ indicator: 'bg-[var(--ui-bg)]', trigger: 'px-1 data-[state=active]:text-[var(--ui-text-highlighted)]' }"
     @update:model-value="(module = $event as string)"
   />
 </template>
diff --git a/docs/app/composables/useSharedData.ts b/docs/app/composables/useSharedData.ts
index 8aa4bdfa..7d844ad2 100644
--- a/docs/app/composables/useSharedData.ts
+++ b/docs/app/composables/useSharedData.ts
@@ -2,12 +2,12 @@ export function useSharedData() {
   const framework = useCookie('nuxt-ui-framework', { default: () => 'nuxt' })
   const frameworks = computed(() => [{
     label: 'Nuxt',
-    icon: 'i-logos-nuxt-icon',
+    icon: 'i-simple-icons-nuxtdotjs',
     value: 'nuxt',
     onSelect: () => framework.value = 'nuxt'
   }, {
     label: 'Vue',
-    icon: 'i-logos-vue',
+    icon: 'i-simple-icons-vuedotjs',
     value: 'vue',
     disabled: module.value === 'ui-pro',
     onSelect: () => framework.value = 'vue'