continue scaffolding and refine the basic foundation

app/components/ThemeSwitcher.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import type { DropdownItem } from '~/types/dropdown'
+
 type Theme = 'light' | 'dark' | 'system'
 
 const colorMode = useColorMode()
-const isOpen = ref(false)
-const buttonRef = ref<HTMLElement | null>(null)
 
-const themeOptions: { value: Theme; label: string; icon: string }[] = [
+const themeOptions: DropdownItem[] = [
     { value: 'light', label: 'Light', icon: 'mynaui:sun' },
     { value: 'dark', label: 'Dark', icon: 'mynaui:moon' },
     { value: 'system', label: 'System', icon: 'mynaui:desktop' }
@@ -15,38 +15,23 @@ const currentOption = computed(() =>
     themeOptions.find(option => option.value === colorMode.preference) || themeOptions[2]
 )
 
-const selectTheme = (newTheme: Theme) => {
-    colorMode.preference = newTheme
-    isOpen.value = false
-}
+const isOpen = ref(false)
 
-const toggleDropdown = () => {
-    isOpen.value = !isOpen.value
+const selectTheme = (item: DropdownItem) => {
+    colorMode.preference = item.value as Theme
 }
-
-useClickOutside(buttonRef, () => {
-    isOpen.value = false
-})
 </script>
 
 <template>
-    <div ref="buttonRef" class="relative">
-        <button aria-label="Open theme switcher" @click="toggleDropdown"
-            class="p-2 flex items-center justify-center rounded-lg hover:bg-[var(--color-highlight)] transition-colors group"
-            :class="isOpen ? 'bg-[var(--color-highlight)]' : 'bg-transparent'">
-            <Icon :name="currentOption!.icon"
-                class="text-5 text-[var(--color-subtle)] group-hover:text-[var(--color-text)] transition-colors" />
-        </button>
-
-        <div v-if="isOpen"
-            class="flex flex-col gap-1 absolute bottom-full mb-2 right-0 bg-[var(--color-neutral)] border border-[var(--color-highlight)] rounded-lg p-1 min-w-[120px] shadow-lg">
-            <button v-for="option in themeOptions" :key="option.value" @click="selectTheme(option.value)"
-                class="w-full flex items-center justify-left gap-2 px-3 py-2 rounded-md hover:bg-[var(--color-highlight)] transition-colors"
-                :class="colorMode.preference === option.value ? 'bg-[var(--color-highlight)] text-[var(--color-text)]' :
-                    'bg-transparent text-[var(--color-subtle)]'">
-                <Icon :name="option.icon" class="w-4 h-4" />
-                <span class="text-sm">{{ option.label }}</span>
+    <Dropdown class="relative" v-model="isOpen" @select="selectTheme" :items="themeOptions" verticality="asscending"
+        placement="right" width="140px">
+        <template #trigger="{ toggle, isOpen }">
+            <button aria-label="Open theme switcher" @click="toggle"
+                class="p-2 flex items-center justify-center rounded-lg hover:bg-[var(--color-highlight)] transition-colors group"
+                :class="isOpen ? 'bg-[var(--color-highlight)]' : 'bg-transparent'">
+                <Icon :name="currentOption!.icon!"
+                    class="text-5 text-[var(--color-subtle)] group-hover:text-[var(--color-text)] transition-colors" />
             </button>
-        </div>
-    </div>
+        </template>
+    </Dropdown>
 </template>