From 9cde9b5cf79bf4586201e6b42f58136bbaa4491f Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 10 Feb 2025 22:05:41 +0100
Subject: [PATCH] use defineProps

---
 src/components/directory/DirectoryCard.vue | 75 ++++++----------------
 1 file changed, 21 insertions(+), 54 deletions(-)

diff --git a/src/components/directory/DirectoryCard.vue b/src/components/directory/DirectoryCard.vue
index 751f177..8791b55 100644
--- a/src/components/directory/DirectoryCard.vue
+++ b/src/components/directory/DirectoryCard.vue
@@ -24,13 +24,11 @@ import {
   CardTitle,
   CardDescription,
 } from '@/components/ui/card'
-import { useRouter } from 'vue-router'
 
-const props = defineProps<{
+defineProps<{
   item: DirectoryItem
 }>()
 
-const router = useRouter()
 
 const categoryIcons = {
   restaurant: UtensilsCrossed,
@@ -68,10 +66,8 @@ const socialColors = {
 </script>
 
 <template>
-  <Card 
-    class="hover:shadow-md transition-shadow relative overflow-hidden group cursor-pointer"
-    @click="$router.push(`/directory/${item.id}`)"
-  >
+  <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
@@ -87,12 +83,8 @@ const socialColors = {
       <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"
-            />
+            <component :is="categoryIcons[item.category]" class="h-6 w-6" :class="categoryColors[item.category]"
+              :title="item.category" />
             <CardTitle>{{ item.name }}</CardTitle>
           </div>
         </div>
@@ -105,13 +97,9 @@ 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" :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
-            >
+              @click.stop>
               <span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
               <ExternalLink class="h-3 w-3 ml-1" />
             </a>
@@ -122,23 +110,17 @@ 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, '')}`"
-                target="_blank" 
-                rel="noopener noreferrer"
+              <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
-              >
+                @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, '')}`"
-                target="_blank" 
-                rel="noopener noreferrer"
+              <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
-              >
+                @click.stop>
                 <MessageCircle class="h-3 w-3" />
                 Telegram
               </a>
@@ -147,11 +129,8 @@ const socialColors = {
 
           <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
-            >
+            <a :href="`lightning:${item.lightning}`"
+              class="text-muted-foreground hover:text-foreground transition-colors" @click.stop>
               {{ item.lightning }}
             </a>
           </div>
@@ -159,13 +138,8 @@ 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"
-              class="text-muted-foreground hover:text-foreground transition-colors"
-              @click.stop
-            >
+            <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>
@@ -173,17 +147,10 @@ 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="[
-                  'transition-colors relative',
-                  socialColors[platform as keyof typeof socialColors]
-                ]" 
-                :title="platform.charAt(0).toUpperCase() + platform.slice(1)"
-                @click.stop
-              >
+              <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>