From ce61630350b988d39c298c1bf613c057febff7ab Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 2 Feb 2025 23:51:17 +0100
Subject: [PATCH] remove appended Icon from imports

---
 src/components/directory/DirectoryCard.vue | 78 +++++++++-------------
 1 file changed, 30 insertions(+), 48 deletions(-)

diff --git a/src/components/directory/DirectoryCard.vue b/src/components/directory/DirectoryCard.vue
index 50c3847..b6a63ed 100644
--- a/src/components/directory/DirectoryCard.vue
+++ b/src/components/directory/DirectoryCard.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { type DirectoryItem } from '@/types/directory'
-import { 
-  MapPinIcon, 
-  PhoneIcon, 
-  ExternalLinkIcon, 
-  ZapIcon, 
-  MessageCircleIcon,
-  FacebookIcon,
-  InstagramIcon,
-  TwitterIcon,
-  YoutubeIcon,
+import {
+  MapPin,
+  Phone,
+  ExternalLink,
+  Zap,
+  MessageCircle,
+  Facebook,
+  Instagram,
+  Twitter,
+  Youtube,
 } from 'lucide-vue-next'
 import {
   Card,
@@ -30,11 +30,11 @@ const categoryColors = {
   other: 'bg-gray-100 text-gray-800'
 }
 
-const socialIcons = {
-  facebook: FacebookIcon,
-  instagram: InstagramIcon,
-  twitter: TwitterIcon,
-  youtube: YoutubeIcon,
+const socials = {
+  facebook: Facebook,
+  instagram: Instagram,
+  twitter: Twitter,
+  youtube: Youtube,
 }
 
 const socialColors = {
@@ -49,10 +49,7 @@ const socialColors = {
 <template>
   <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"
-    >
+    <div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
       LOCAL
     </div>
 
@@ -78,47 +75,42 @@ const socialColors = {
         <!-- Contact Info -->
         <div class="space-y-2">
           <div v-if="item.town || item.address" class="flex items-center text-sm group">
-            <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"
-            >
+            <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>
-              <ExternalLinkIcon class="h-3 w-3 ml-1" />
+              <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">
-            <PhoneIcon class="h-4 w-4" />
+            <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">
-                <MessageCircleIcon class="h-3 w-3" />
+                <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">
-                <MessageCircleIcon class="h-3 w-3" />
+                <MessageCircle class="h-3 w-3" />
                 Telegram
               </a>
             </div>
           </div>
 
           <div v-if="item.lightning" class="flex items-center text-sm">
-            <ZapIcon class="mr-2 h-4 w-4" />
+            <Zap 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" />
+            <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] }}
@@ -128,21 +120,11 @@ 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',
-                  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 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>