preserve link clickability and rest links to DirectoryItem.vue

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,14 +68,16 @@ const socialColors = {
 </script>
 
 <template>
-  <router-link :to="`/directory/${item.id}`" class="block">
+  <Card 
-    <Card class="hover:shadow-md transition-shadow relative overflow-hidden">
+    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">
+    <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" />
@@ -100,8 +105,13 @@ const socialColors = {
         <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"
+            <a v-if="item.mapsUrl" 
-                class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors">
+              :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>
@@ -112,15 +122,23 @@ const socialColors = {
             <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, '')}`"
+              <a v-if="item.contactType.includes('whatsapp')" 
-                  target="_blank" rel="noopener noreferrer"
+                :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
-                  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">
+                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
+              >
                 <MessageCircle class="h-3 w-3" />
                 WhatsApp
               </a>
-                <a v-if="item.contactType.includes('telegram')" :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
+              <a v-if="item.contactType.includes('telegram')" 
-                  target="_blank" rel="noopener noreferrer"
+                :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
-                  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">
+                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>
@@ -132,6 +150,7 @@ const socialColors = {
             <a 
               :href="`lightning:${item.lightning}`"
               class="text-muted-foreground hover:text-foreground transition-colors"
+              @click.stop
             >
               {{ item.lightning }}
             </a>
@@ -140,8 +159,13 @@ const socialColors = {
           <!-- 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"
+            <a 
-                class="text-muted-foreground hover:text-foreground transition-colors">
+              :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>
@@ -149,10 +173,17 @@ const socialColors = {
           <!-- 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="[
+              <a v-if="url" 
-                  'transition-colors',
+                :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)">
+                ]" 
+                :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>
@@ -161,5 +192,4 @@ const socialColors = {
       </div>
     </CardContent>
   </Card>
-  </router-link>
 </template>