From 83c6285bce21f38ed7f15a1343d673d861b6333d Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 10 Feb 2025 21:35:38 +0100
Subject: [PATCH] preserve link clickability and rest links to
 DirectoryItem.vue

---
 src/components/directory/DirectoryCard.vue | 202 ++++++++++++---------
 1 file changed, 116 insertions(+), 86 deletions(-)

diff --git a/src/components/directory/DirectoryCard.vue b/src/components/directory/DirectoryCard.vue
index 53be380..751f177 100644
--- a/src/components/directory/DirectoryCard.vue
+++ b/src/components/directory/DirectoryCard.vue
@@ -24,11 +24,14 @@ import {
   CardTitle,
   CardDescription,
 } from '@/components/ui/card'
+import { useRouter } from 'vue-router'
 
-defineProps<{
+const props = defineProps<{
   item: DirectoryItem
 }>()
 
+const router = useRouter()
+
 const categoryIcons = {
   restaurant: UtensilsCrossed,
   lodging: Bed,
@@ -65,101 +68,128 @@ const socialColors = {
 </script>
 
 <template>
-  <router-link :to="`/directory/${item.id}`" class="block">
-    <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
+  <Card 
+    class="hover:shadow-md transition-shadow relative overflow-hidden group cursor-pointer"
+    @click="$router.push(`/directory/${item.id}`)"
+  >
+    <!-- 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 relative z-20">
+      <!-- Image -->
+      <div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
+        <img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
       </div>
 
-      <CardContent class="p-6 space-y-4">
-        <!-- Image -->
-        <div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
-          <img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
+      <!-- Content -->
+      <div class="space-y-3">
+        <div class="flex items-start justify-between">
+          <div class="flex items-center gap-3">
+            <component 
+              :is="categoryIcons[item.category]" 
+              class="h-6 w-6"
+              :class="categoryColors[item.category]"
+              :title="item.category"
+            />
+            <CardTitle>{{ item.name }}</CardTitle>
+          </div>
         </div>
 
-        <!-- Content -->
-        <div class="space-y-3">
-          <div class="flex items-start justify-between">
-            <div class="flex items-center gap-3">
-              <component 
-                :is="categoryIcons[item.category]" 
-                class="h-6 w-6"
-                :class="categoryColors[item.category]"
-                :title="item.category"
-              />
-              <CardTitle>{{ item.name }}</CardTitle>
-            </div>
+        <CardDescription>
+          {{ item.description }}
+        </CardDescription>
+
+        <!-- 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 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 relative"
+              @click.stop
+            >
+              <span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
+              <ExternalLink class="h-3 w-3 ml-1" />
+            </a>
+            <span v-else>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
           </div>
 
-          <CardDescription>
-            {{ item.description }}
-          </CardDescription>
-
-          <!-- 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 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>
-                <ExternalLink 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" />
-              <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" />
-                  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" />
-                  Telegram
-                </a>
-              </div>
-            </div>
-
-            <div v-if="item.lightning" class="flex items-center text-sm">
-              <Zap class="mr-2 h-4 w-4 text-amber-500" />
-              <a 
-                :href="`lightning:${item.lightning}`"
-                class="text-muted-foreground hover:text-foreground transition-colors"
+          <div v-if="item.contact" class="flex items-center text-sm gap-2">
+            <Phone 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 relative"
+                @click.stop
               >
-                {{ item.lightning }}
+                <MessageCircle class="h-3 w-3" />
+                WhatsApp
               </a>
-            </div>
-
-            <!-- Website -->
-            <div v-if="item.url" class="flex items-center text-sm">
-              <ExternalLink 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 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 relative"
+                @click.stop
+              >
+                <MessageCircle class="h-3 w-3" />
+                Telegram
               </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="socials[platform as keyof typeof socials]" class="h-4 w-4" />
-                </a>
-              </template>
-            </div>
+          </div>
+
+          <div v-if="item.lightning" class="flex items-center text-sm">
+            <Zap class="mr-2 h-4 w-4 text-amber-500" />
+            <a 
+              :href="`lightning:${item.lightning}`"
+              class="text-muted-foreground hover:text-foreground transition-colors"
+              @click.stop
+            >
+              {{ item.lightning }}
+            </a>
+          </div>
+
+          <!-- Website -->
+          <div v-if="item.url" class="flex items-center text-sm">
+            <ExternalLink 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"
+              @click.stop
+            >
+              {{ 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 relative',
+                  socialColors[platform as keyof typeof socialColors]
+                ]" 
+                :title="platform.charAt(0).toUpperCase() + platform.slice(1)"
+                @click.stop
+              >
+                <component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
+              </a>
+            </template>
           </div>
         </div>
-      </CardContent>
-    </Card>
-  </router-link>
+      </div>
+    </CardContent>
+  </Card>
 </template>