Add Nuxt UI v3

app/components/AppFooter.vue

@@ -30,9 +30,9 @@ const { t } = useI18n({
 <template>
   <footer class="my-16">
     <div class="flex justify-center mb-16">
-      <UDivider
+      <USeparator
         class="md:w-2/3"
-        size="2xs"
+        size="xs"
         type="solid"
       />
     </div>

app/components/AppHeader.vue

@@ -14,11 +14,6 @@ const navs = [
     },
     to: '/',
     icon: 'house-line-duotone',
-    shortcut: {
-      en: 'H',
-      fr: 'A',
-      es: 'I',
-    },
   },
   {
     label: {
@@ -28,11 +23,6 @@ const navs = [
     },
     to: '/uses',
     icon: 'backpack-duotone',
-    shortcut: {
-      en: 'U',
-      fr: 'U',
-      es: 'U',
-    },
   },
   {
     label: {
@@ -42,11 +32,6 @@ const navs = [
     },
     to: '/portfolio',
     icon: 'books-duotone',
-    shortcut: {
-      en: 'W',
-      fr: 'E',
-      es: 'E',
-    },
   },
   {
     label: {
@@ -57,11 +42,6 @@ const navs = [
     icon: 'address-book-duotone',
     to: '/Resume2024.pdf',
     target: '_blank',
-    shortcut: {
-      en: 'R',
-      fr: 'C',
-      es: 'C',
-    },
   },
 ]
 
@@ -76,33 +56,27 @@ async function toggleTheme() {
   document.body.style.animation = ''
 }
 
-const { locale, setLocale, locales, t, availableLocales } = useI18n()
-const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+const { locale, setLocale, locales, t } = useI18n()
+const currentLocale = computed(() => locales.filter(l => l.code === locale.value)[0])
 const lang = ref(locale.value)
 watch(lang, () => changeLocale(lang.value))
 
-async function changeLocale(newLocale?: string) {
+async function changeLocale(newLocale: string) {
   document.body.style.animation = 'switch-on .2s'
   await new Promise(resolve => setTimeout(resolve, 200))
 
-  if (!newLocale) {
-    const currentLocaleIndex = availableLocales.findIndex(l => l === locale.value)
-    const nextLocaleIndex = (currentLocaleIndex + 1) % availableLocales.length
-    newLocale = availableLocales[nextLocaleIndex]
-    lang.value = newLocale!
-  }
-
-  await setLocale(newLocale ?? 'en')
+  await setLocale(newLocale as 'en' | 'fr' | 'es')
   document.body.style.animation = 'switch-off .2s'
 
   await new Promise(resolve => setTimeout(resolve, 200))
   document.body.style.animation = ''
 }
 
+const open = ref(false)
 const router = useRouter()
 defineShortcuts({
   t: () => toggleTheme(),
-  l: () => changeLocale(),
+  l: () => open.value = !open.value,
   backspace: () => router.back(),
 })
 </script>
@@ -110,7 +84,7 @@ defineShortcuts({
 <template>
   <header class="flex md:items-center justify-between my-8 gap-2">
     <NuxtLinkLocale
-      class="handwriting text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
+      class="handwriting text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-white"
       to="/"
     >
       Arthur Danjou
@@ -126,52 +100,45 @@ defineShortcuts({
           :target="nav.target ? nav.target : '_self'"
           :to="nav.to"
           :aria-label="nav.label"
-          color="white"
+          color="neutral"
           size="sm"
-          variant="solid"
+          variant="outline"
         />
       </UTooltip>
       <ClientOnly>
         <UTooltip
-          :shortcuts="['T']"
+          :kbds="['T']"
           :text="t('theme')"
         >
           <UButton
             :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
-            color="white"
+            color="neutral"
             aria-label="switch theme"
             size="sm"
-            variant="solid"
+            variant="outline"
             @click="toggleTheme()"
           />
         </UTooltip>
         <UTooltip
-          :shortcuts="['L']"
+          :kbds="['L']"
           :text="t('language')"
-          :popper="{ placement: 'right' }"
+          :content="{
+            align: 'center',
+            side: 'right',
+            sideOffset: 8,
+          }"
         >
-          <USelectMenu
+          <USelect
             v-model="lang"
-            :options="locales"
+            v-model:open="open"
+            :items="locales"
             size="sm"
-            option-attribute="code"
-            value-attribute="code"
+            :leading-icon="currentLocale.icon"
+            label-key="label"
+            value-key="code"
             variant="outline"
-          >
-            <template #leading>
-              <UIcon
-                :name="currentLocale!.icon"
-                class="w-5 h-5"
-              />
-            </template>
-            <template #option="{ option: language }">
-              <UIcon
-                :name="language.icon"
-                class="w-5 h-5"
-              />
-              <span>{{ language.code }}</span>
-            </template>
-          </USelectMenu>
+            @update:model-value="changeLocale"
+          />
         </UTooltip>
       </ClientOnly>
     </nav>

app/components/content/HoverText.vue

@@ -20,6 +20,12 @@ defineProps({
   <ClientOnly>
     <UTooltip
       :popper="{ placement: position }"
+      :delay-duration="4"
+      :content="{
+        align: 'center',
+        side: position,
+        sideOffset: 8,
+      }"
       :text="hover"
     >
       <strong class="leading-3 cursor-help">{{ text }}</strong>

app/components/content/ProseIcon.vue

@@ -9,6 +9,22 @@ defineProps({
     default: 'gray',
   },
 })
+
+const colorVariants = {
+  gray: 'text-gray-500 decoration-gray-400',
+  red: 'text-red-500 decoration-red-400',
+  yellow: 'text-yellow-500 decoration-yellow-400',
+  green: 'text-green-500 decoration-green-400',
+  blue: 'text-blue-500 decoration-blue-400',
+  indigo: 'text-indigo-500 decoration-indigo-400',
+  purple: 'text-purple-500 decoration-purple-400',
+  pink: 'text-pink-500 decoration-pink-400',
+  sky: 'text-sky-500 decoration-sky-400',
+  zinc: 'text-zinc-500 decoration-zinc-400',
+  orange: 'text-orange-500 decoration-orange-400',
+  amber: 'text-amber-500 decoration-amber-400',
+  emerald: 'text-emerald-500 decoration-emerald-400',
+}
 </script>
 
 <template>
@@ -18,7 +34,7 @@ defineProps({
       :name="`i-logos:${icon}`"
     />
     <span
-      :class="`text-${color}-500 decoration-${color}-300`"
+      :class="colorVariants[color]"
       class="sofia font-medium underline-offset-2 underline"
     >
       <slot />

app/components/home/Stats.vue

@@ -2,7 +2,7 @@
 import type { Stats } from '~~/types'
 
 const { locale, locales } = useI18n()
-const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
+const currentLocale = computed(() => locales.find(l => l.code === locale.value))
 
 const { data: stats } = await useFetch<Stats>('/api/stats')
 const { t } = useI18n({

app/components/uses/List.vue

@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div class="space-y-8">
-    <UDivider
+    <USeparator
       :label="title"
       size="xs"
     />