update locales, Navbar, Footer, DirectoryFilter

src/components/directory/DirectoryFilter.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Search } from 'lucide-vue-next'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
+const { t } = useI18n()
+
 defineProps<{
   category: string
   search: string
@@ -45,7 +49,7 @@ const towns = [
         <Search class="h-5 w-5 text-muted-foreground" />
       </div>
       <Input type="text" :value="search" @input="emit('update:search', ($event.target as HTMLInputElement).value)"
-        class="pl-10" placeholder="Search..." />
+        class="pl-10" :placeholder="t('directory.search')" />
     </div>
 
     <div class="flex flex-col md:flex-row gap-2">
@@ -59,9 +63,9 @@ const towns = [
 
       <!-- Town Filter -->
       <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
-        <Button v-for="t in towns" :key="t.id" @click="emit('update:town', t.id)"
+        <Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
-          :variant="town === t.id ? 'default' : 'secondary'" size="sm" class="rounded-full">
+          :variant="town === to.id ? 'default' : 'secondary'" size="sm" class="rounded-full">
-          {{ t.label }}
+          {{ to.label }}
         </Button>
       </div>
     </div>

src/components/layout/Footer.vue

@@ -1,27 +1,24 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { Rocket } from 'lucide-vue-next'
-const currentYear = new Date().getFullYear()
+
+const { t } = useI18n()
 </script>
 
 <template>
   <footer class="bg-card border-t border-border">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-      <div class="flex h-16 items-center justify-between">
+      <div class="flex flex-col md:flex-row justify-between items-center py-4 gap-4">
         <!-- Powered by section -->
         <div class="flex items-center space-x-2 text-sm text-muted-foreground">
-          <span>Powered by</span>
+          <span>{{ t('footer.poweredBy') }}</span>
           <img src="@/assets/bitcoin.svg" alt="Bitcoin" class="w-8 h-8" />
         </div>
-
-        <!-- Copyright and Donate Button -->
         <div class="flex items-center gap-4">
-          <span class="text-sm text-muted-foreground">
-            © {{ currentYear }}
-          </span>
           <a href="https://lnbits.atitlan.io/tipjar/3" target="_blank" rel="noopener noreferrer"
             class="inline-flex items-center justify-center rounded-md bg-accent/10 px-4 py-2 text-sm font-medium text-accent border border-accent/20 hover:bg-accent/20 hover:border-accent/40 transition-colors">
             <Rocket class="mr-2 h-4 w-4" />
-            Donate
+            {{ t('footer.donate') }}
           </a>
         </div>
       </div>

src/components/layout/Navbar.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Menu, X } from 'lucide-vue-next'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 
+const { t } = useI18n()
 const isOpen = ref(false)
 
-const navigation = [
+const navigation = computed(() => [
-  { name: 'Home', href: '/' },
+  { name: t('nav.home'), href: '/' },
-  { name: 'Directory', href: '/directory' },
+  { name: t('nav.directory'), href: '/directory' },
-  { name: 'FAQ', href: '/faq' },
+  { name: t('nav.faq'), href: '/faq' },
-]
+])
 
 const toggleMenu = () => {
   isOpen.value = !isOpen.value
@@ -26,7 +28,7 @@ const toggleMenu = () => {
           <div class="flex flex-shrink-0 items-center">
             <!-- Replace with your logo -->
             <router-link to="/" class="text-xl font-bold text-card-foreground">
-              ⚡️ Atitlan Lightning Directory
+              ⚡️ {{ t('nav.title') }}
             </router-link>
           </div>
 

src/i18n/locales/en.ts

@@ -2,7 +2,8 @@ export default {
   nav: {
     home: 'Home',
     directory: 'Directory',
-    faq: 'FAQ'
+    faq: 'FAQ',
+    title: 'Atitlan Lightning Directory'
   },
   home: {
     title: 'Find Bitcoin Lightning Payments',
@@ -29,6 +30,7 @@ export default {
   },
   footer: {
     poweredBy: 'Powered by',
-    donate: 'Donate'
+    donate: 'Donate',
+  },
   }
 } 

src/i18n/locales/es.ts

@@ -2,7 +2,8 @@ export default {
   nav: {
     home: 'Inicio',
     directory: 'Directorio',
-    faq: 'Preguntas'
+    faq: 'Preguntas',
+    title: 'Directorio Lightning de Atitlán'
   },
   home: {
     title: 'Encuentra Pagos Bitcoin Lightning',
@@ -28,7 +29,8 @@ export default {
     lightning: 'Dirección Lightning'
   },
   footer: {
-    poweredBy: 'Desarrollado con',
+    poweredBy: 'Alimentado por',
-    donate: 'Donar'
+    donate: 'Donar',
+  },
   }
 }