From df7b0d6c1366761075b532899192747ff7e03251 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 2 Feb 2025 23:30:40 +0100
Subject: [PATCH] update Directory Cards with new fiels, add LOCAL watermark
 for locally ran businesses; improve url link

---
 src/components/directory/DirectoryCard.vue   |  94 ++++++-
 src/components/directory/DirectoryFilter.vue |   4 +-
 src/pages/Directory.vue                      | 277 ++++++++++++++++++-
 3 files changed, 360 insertions(+), 15 deletions(-)

diff --git a/src/components/directory/DirectoryCard.vue b/src/components/directory/DirectoryCard.vue
index 733a40c..50c3847 100644
--- a/src/components/directory/DirectoryCard.vue
+++ b/src/components/directory/DirectoryCard.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import { type DirectoryItem } from '@/types/directory'
-import { MapPin, Phone, ExternalLink, Zap, MessageCircle } from 'lucide-vue-next'
+import { 
+  MapPinIcon, 
+  PhoneIcon, 
+  ExternalLinkIcon, 
+  ZapIcon, 
+  MessageCircleIcon,
+  FacebookIcon,
+  InstagramIcon,
+  TwitterIcon,
+  YoutubeIcon,
+} from 'lucide-vue-next'
 import {
   Card,
   CardContent,
@@ -19,10 +29,33 @@ const categoryColors = {
   retail: 'bg-green-100 text-green-800',
   other: 'bg-gray-100 text-gray-800'
 }
+
+const socialIcons = {
+  facebook: FacebookIcon,
+  instagram: InstagramIcon,
+  twitter: TwitterIcon,
+  youtube: YoutubeIcon,
+}
+
+const socialColors = {
+  facebook: 'text-blue-600 hover:text-blue-700',
+  instagram: 'text-pink-600 hover:text-pink-700',
+  twitter: 'text-blue-400 hover:text-blue-500',
+  youtube: 'text-red-600 hover:text-red-700',
+  tiktok: 'text-gray-800 hover:text-gray-900'
+}
 </script>
 
 <template>
-  <Card class="hover:shadow-md transition-shadow">
+  <Card class="hover:shadow-md transition-shadow relative overflow-hidden">
+    <!-- Local watermark -->
+    <div 
+      v-if="item.local" 
+      class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30"
+    >
+      LOCAL
+    </div>
+
     <CardContent class="p-6 space-y-4">
       <!-- Image -->
       <div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
@@ -45,39 +78,74 @@ const categoryColors = {
         <!-- Contact Info -->
         <div class="space-y-2">
           <div v-if="item.town || item.address" class="flex items-center text-sm group">
-            <MapPin class="mr-2 h-4 w-4" />
-            <div class="flex items-center gap-1">
+            <MapPinIcon class="mr-2 h-4 w-4 text-red-400" />
+            <a 
+              v-if="item.mapsUrl" 
+              :href="item.mapsUrl" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
+            >
               <span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
-              <a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
-                class="text-muted-foreground hover:text-foreground ml-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                <ExternalLink class="h-3 w-3" />
-              </a>
-            </div>
+              <ExternalLinkIcon class="h-3 w-3 ml-1" />
+            </a>
+            <span v-else>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
           </div>
 
           <div v-if="item.contact" class="flex items-center text-sm gap-2">
-            <Phone class="h-4 w-4" />
+            <PhoneIcon class="h-4 w-4" />
             <span>{{ item.contact }}</span>
             <div v-if="item.contactType" class="flex gap-1">
               <a v-if="item.contactType.includes('whatsapp')" :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
                 target="_blank" rel="noopener noreferrer"
                 class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-green-200 transition-colors">
-                <MessageCircle class="h-3 w-3" />
+                <MessageCircleIcon class="h-3 w-3" />
                 WhatsApp
               </a>
               <a v-if="item.contactType.includes('telegram')" :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
                 target="_blank" rel="noopener noreferrer"
                 class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-blue-200 transition-colors">
-                <MessageCircle class="h-3 w-3" />
+                <MessageCircleIcon class="h-3 w-3" />
                 Telegram
               </a>
             </div>
           </div>
 
           <div v-if="item.lightning" class="flex items-center text-sm">
-            <Zap class="mr-2 h-4 w-4" />
+            <ZapIcon class="mr-2 h-4 w-4" />
             <span>{{ item.lightning }}</span>
           </div>
+
+          <!-- Website -->
+          <div v-if="item.url" class="flex items-center text-sm">
+            <ExternalLinkIcon class="mr-2 h-4 w-4" />
+            <a :href="item.url" target="_blank" rel="noopener noreferrer"
+              class="text-muted-foreground hover:text-foreground transition-colors">
+              {{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
+            </a>
+          </div>
+
+          <!-- Social Media Links -->
+          <div v-if="item.social" class="flex items-center gap-2 text-sm">
+            <template v-for="(url, platform) in item.social" :key="platform">
+              <a 
+                v-if="url"
+                :href="url" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                :class="[
+                  'transition-colors',
+                  socialColors[platform as keyof typeof socialColors]
+                ]"
+                :title="platform.charAt(0).toUpperCase() + platform.slice(1)"
+              >
+                <component 
+                  :is="socialIcons[platform as keyof typeof socialIcons]" 
+                  class="h-4 w-4"
+                />
+              </a>
+            </template>
+          </div>
         </div>
       </div>
     </CardContent>
diff --git a/src/components/directory/DirectoryFilter.vue b/src/components/directory/DirectoryFilter.vue
index 1cd54e6..67c9932 100644
--- a/src/components/directory/DirectoryFilter.vue
+++ b/src/components/directory/DirectoryFilter.vue
@@ -16,9 +16,11 @@ const emit = defineEmits<{
 const categories = [
   { id: 'all', label: 'All' },
   { id: 'restaurant', label: 'Restaurants' },
+  { id: 'lodging', label: 'Lodging' },
+  { id: 'goods', label: 'Goods' },
+  { id: 'services', label: 'Services' },
   { id: 'taxi', label: 'Taxis' },
   { id: 'lancha', label: 'Lanchas' },
-  { id: 'retail', label: 'Retail' },
   { id: 'other', label: 'Other' }
 ]
 </script>
diff --git a/src/pages/Directory.vue b/src/pages/Directory.vue
index f3c069a..6217771 100644
--- a/src/pages/Directory.vue
+++ b/src/pages/Directory.vue
@@ -9,8 +9,12 @@ const mockItems: DirectoryItem[] = [
     name: 'Ixchel Cafe & Bakery',
     category: 'restaurant',
     description: 'A cozy cafe serving great coffee and accepting Bitcoin Lightning payments.',
+    url: 'https://ixchel.atitlan.io',
     town: 'San Marcos',
     mapsUrl: 'https://maps.app.goo.gl/sbjmvqP8U4SB4FS29',
+    social: {
+      facebook: 'https://www.facebook.com/emporium.atitlan'
+    }
   },
   {
     id: '2',
@@ -25,9 +29,280 @@ const mockItems: DirectoryItem[] = [
     id: '3',
     name: 'Bitcoin Lake Lancha',
     category: 'lancha',
-    description: 'Cross-harbor lancha service accepting Lightning payments.',
     address: 'Pier 21, Harbor Front',
     contact: '+1 234-567-8902'
+  },
+  {
+    id: '4',
+    name: 'Eagle\'s Nest',
+    category: 'restaurant',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/eaglesnestatitlan'
+    }
+  },
+  {
+    id: '6',
+    name: 'La Sala del Lago',
+    category: 'restaurant',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/La-Sala-Del-Lago-100220539146301'
+    }
+  },
+  {
+    id: '7',
+    name: 'Nectar',
+    category: 'restaurant',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/lovenectar'
+    },
+    local: true
+  },
+  {
+    id: '8',
+    name: 'Arati Cafe',
+    category: 'restaurant',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/Arati-Cafe-105767784719695'
+    },
+    local: true
+  },
+  {
+    id: '9',
+    name: 'Fe Restaurant',
+    category: 'restaurant',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/fesanmarcos'
+    }
+  },
+  {
+    id: '10',
+    name: 'Hostal del Lago',
+    category: 'lodging',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/Hostel-Del-Lago-605530306467708'
+    }
+  },
+  {
+    id: '11',
+    name: 'Lush Atitlan',
+    category: 'lodging',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/lushatitlan/'
+    },
+    local: true
+  },
+  {
+    id: '12',
+    name: 'Hostel Fe San Marcos',
+    category: 'lodging',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/HostelFeSanMarcos'
+    }
+  },
+  {
+    id: '13',
+    name: 'Hotel Casa Maya',
+    category: 'lodging',
+    town: 'San Marcos',
+    mapsUrl: 'https://www.google.com/maps/place/Hotel+Casa+Maya'
+  },
+  {
+    id: '14',
+    name: 'Floresta Atitlan',
+    category: 'goods',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/florestatitlan'
+    }
+  },
+  {
+    id: '15',
+    name: 'Artesanias San Marcos La Laguna',
+    category: 'goods',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/Artesanias-San-Marcos-La-Laguna-102826589071628/'
+    },
+    local: true
+  },
+  {
+    id: '16',
+    name: 'Textiles Felix San Marcos La Laguna',
+    category: 'goods',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/Textiles-Felix-San-Marcos-La-Laguna-102732085750559'
+    },
+    local: true
+  },
+  {
+    id: '17',
+    name: 'Health Food Store San Jose',
+    category: 'goods',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/Health-Food-Store-San-Jose-719299235179691'
+    },
+    local: true
+  },
+  {
+    id: '18',
+    name: 'Tienda San Jose 2',
+    category: 'goods',
+    town: 'San Marcos',
+    mapsUrl: 'https://www.google.com/maps/place/Tienda+San+José+%232',
+    local: true
+  },
+  {
+    id: '19',
+    name: 'Sound Temple San Marcos',
+    category: 'services',
+    town: 'San Marcos',
+    social: {
+      facebook: 'https://www.facebook.com/SoundTempleSanMarcos'
+    }
+  },
+  {
+    id: '20',
+    name: 'Granja Tz\'ikin',
+    category: 'restaurant',
+    town: 'Tzununa',
+    social: {
+      facebook: 'https://www.facebook.com/granjatzikin'
+    }
+  },
+  {
+    id: '21',
+    name: 'Veda',
+    category: 'restaurant',
+    town: 'Tzununa',
+    social: {
+      facebook: 'https://www.facebook.com/vedafoodismedicine'
+    }
+  },
+  {
+    id: '22',
+    name: 'Bambu Guest House',
+    category: 'lodging',
+    town: 'Tzununa',
+    social: {
+      facebook: 'https://www.facebook.com/bambuguesthousegt'
+    }
+  },
+  {
+    id: '23',
+    name: 'Atitlan Organics',
+    category: 'goods',
+    town: 'Tzununa',
+    social: {
+      facebook: 'https://www.facebook.com/atitlanorganics'
+    }
+  },
+  {
+    id: '24',
+    name: 'Holy Wow Cacao',
+    category: 'goods',
+    town: 'Tzununa',
+    social: {
+      facebook: 'https://www.facebook.com/HolyWowCacao'
+    }
+  },
+  {
+    id: '25',
+    name: 'Multiservicios Yaxon',
+    category: 'services',
+    town: 'Tzununa',
+    social: {
+      facebook: 'https://www.facebook.com/Multiservicios-Yaxón-299907600397260'
+    },
+    local: true
+  },
+  {
+    id: '26',
+    name: 'Utz Kab',
+    category: 'goods',
+    town: 'San Pablo',
+    social: {
+      facebook: 'https://www.facebook.com/UTZ-KAB-534232490075686'
+    },
+    local: true
+  },
+  {
+    id: '27',
+    name: 'Utz Color Fashion',
+    category: 'goods',
+    town: 'San Pedro',
+    social: {
+      facebook: 'https://www.facebook.com/UtzColorFashion'
+    },
+    local: true
+  },
+  {
+    id: '28',
+    name: 'Do Bau',
+    category: 'goods',
+    town: 'San Pedro',
+    social: {
+      facebook: 'https://www.facebook.com/Adrianamatrioshka'
+    },
+    local: true
+  },
+  {
+    id: '29',
+    name: 'Full Print',
+    category: 'services',
+    town: 'San Pedro',
+    social: {
+      facebook: 'https://www.facebook.com/profile.php?id=100057645572968'
+    },
+    local: true
+  },
+  {
+    id: '30',
+    name: 'Atitlan Muay Thai',
+    category: 'services',
+    town: 'San Pedro',
+    social: {
+      facebook: 'https://www.facebook.com/muaythaiatitlan'
+    }
+  },
+  {
+    id: '31',
+    name: 'Caffé Kitsch',
+    category: 'restaurant',
+    town: 'Panajachel',
+    social: {
+      facebook: 'https://www.facebook.com/Kitschers'
+    },
+    local: true
+  },
+  {
+    id: '32',
+    name: 'Zoe Nails & Spa',
+    category: 'services',
+    town: 'Panajachel',
+    social: {
+      facebook: 'https://www.facebook.com/zoenailsyspapanajachel'
+    },
+    local: true
+  },
+  {
+    id: '33',
+    name: 'Hotel Corazon del Mundo Fresh',
+    category: 'lodging',
+    town: 'Jaibalito',
+    social: {
+      facebook: 'https://www.facebook.com/corazondelmundofresh'
+    },
+    local: true
   }
 ]
 </script>