add town filter

src/components/directory/DirectoryFilter.vue

@@ -6,11 +6,13 @@ import { Button } from '@/components/ui/button'
 defineProps<{
   category: string
   search: string
+  town: string
 }>()
 
 const emit = defineEmits<{
   'update:category': [value: string]
   'update:search': [value: string]
+  'update:town': [value: string]
 }>()
 
 const categories = [
@@ -23,6 +25,16 @@ const categories = [
   { id: 'lancha', label: 'Lanchas' },
   { id: 'other', label: 'Other' }
 ]
+
+const towns = [
+  { id: 'all', label: 'All Towns' },
+  { id: 'San Marcos', label: 'San Marcos' },
+  { id: 'Tzununa', label: 'Tzununa' },
+  { id: 'San Pablo', label: 'San Pablo' },
+  { id: 'San Pedro', label: 'San Pedro' },
+  { id: 'Panajachel', label: 'Panajachel' },
+  { id: 'Jaibalito', label: 'Jaibalito' }
+]
 </script>
 
 <template>
@@ -36,12 +48,22 @@ const categories = [
         class="pl-10" placeholder="Search..." />
     </div>
 
-    <!-- Category Filter -->
-    <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
-      <Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
-        :variant="category === cat.id ? 'default' : 'secondary'" size="sm" class="rounded-full">
-        {{ cat.label }}
-      </Button>
+    <div class="flex flex-col md:flex-row gap-2">
+      <!-- Category Filter -->
+      <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
+        <Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
+          :variant="category === cat.id ? 'default' : 'secondary'" size="sm" class="rounded-full">
+          {{ cat.label }}
+        </Button>
+      </div>
+
+      <!-- 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)"
+          :variant="town === t.id ? 'default' : 'secondary'" size="sm" class="rounded-full">
+          {{ t.label }}
+        </Button>
+      </div>
     </div>
   </div>
 </template>

src/components/directory/DirectoryGrid.vue

@@ -6,6 +6,7 @@ import { type DirectoryItem } from '@/types/directory'
 import DirectoryFilter from './DirectoryFilter.vue'
 
 const selectedCategory = ref<string>('all')
+const selectedTown = ref<string>('all')
 const searchQuery = ref('')
 
 const props = defineProps<{
@@ -42,6 +43,11 @@ const filteredItems = computed(() => {
     results = results.filter(item => item.category === selectedCategory.value)
   }
 
+  // Apply town filter
+  if (selectedTown.value !== 'all') {
+    results = results.filter(item => item.town === selectedTown.value)
+  }
+
   return results
 })
 </script>
@@ -50,7 +56,7 @@ const filteredItems = computed(() => {
   <div class="container mx-auto px-4 py-8">
     <!-- Filters -->
     <div class="mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
-      <DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" />
+      <DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" v-model:town="selectedTown" />
     </div>
 
     <!-- Grid -->