♻️ Moved the components to use naive ui + daisyui

app/components/FooterCompact.vue

@@ -1,30 +1,17 @@
 <template>
-  <v-container class="footer">
-    <div class="d-flex justify-space-between align-center">
-      <v-select
-        :items="['English (United States)']"
-        model-value="English (United States)"
-        variant="plain"
-        density="compact"
-        hide-details
+  <div class="container absolute bottom-5 left-1/2 -translate-x-1/2">
+    <div class="flex justify-between items-center">
+      <n-select
+        :options="[{ label: 'English (United States)', value: 'en-us' }]"
+        model-value="en-us"
+        size="small"
         class="flex-grow-0"
       />
-      <div class="d-flex">
-        <v-btn variant="text" size="small" class="text-capitalize">Help</v-btn>
-        <v-btn variant="text" size="small" class="text-capitalize"
-          >Privacy</v-btn
-        >
-        <v-btn variant="text" size="small" class="text-capitalize">Terms</v-btn>
+      <div class="flex">
+        <n-button text size="small">Help</n-button>
+        <n-button text size="small">Privacy</n-button>
+        <n-button text size="small">Terms</n-button>
       </div>
     </div>
-  </v-container>
+  </div>
 </template>
-
-<style scoped>
-.footer {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-</style>