apply icons to DirectoryCard too

src/components/directory/DirectoryCard.vue

@@ -10,6 +10,14 @@ import {
   Instagram,
   Twitter,
   Youtube,
+  UtensilsCrossed,
+  Bed,
+  ShoppingBag,
+  Wrench,
+  Car,
+  Ship,
+  HelpCircle,
+  Sparkles,
 } from 'lucide-vue-next'
 import {
   Card,
@@ -22,14 +30,24 @@ defineProps<{
   item: DirectoryItem
 }>()
 
+const categoryIcons = {
+  restaurant: UtensilsCrossed,
+  lodging: Bed,
+  goods: ShoppingBag,
+  services: Sparkles,
+  taxi: Car,
+  lancha: Ship,
+  other: HelpCircle,
+} as const
+
 const categoryColors = {
-  restaurant: 'bg-orange-100 text-orange-800',
+  restaurant: 'text-orange-500',
-  taxi: 'bg-yellow-100 text-yellow-800',
+  lodging: 'text-purple-500',
-  lancha: 'bg-blue-100 text-blue-800',
+  goods: 'text-green-500',
-  lodging: 'bg-purple-100 text-purple-800',
+  services: 'text-pink-500',
-  goods: 'bg-green-100 text-green-800',
+  taxi: 'text-yellow-500',
-  services: 'bg-pink-100 text-pink-800',
+  lancha: 'text-blue-500',
-  other: 'bg-gray-100 text-gray-800'
+  other: 'text-gray-500',
 } as const
 
 const socials = {
@@ -64,10 +82,15 @@ const socialColors = {
         <!-- Content -->
         <div class="space-y-3">
           <div class="flex items-start justify-between">
-            <CardTitle>{{ item.name }}</CardTitle>
+            <div class="flex items-center gap-3">
-            <span class="rounded-full px-2.5 py-0.5 text-xs font-semibold" :class="categoryColors[item.category]">
+              <component 
-              {{ item.category }}
+                :is="categoryIcons[item.category]" 
-            </span>
+                class="h-6 w-6"
+                :class="categoryColors[item.category]"
+                :title="item.category"
+              />
+              <CardTitle>{{ item.name }}</CardTitle>
+            </div>
           </div>
 
           <CardDescription>
@@ -106,7 +129,7 @@ const socialColors = {
             </div>
 
             <div v-if="item.lightning" class="flex items-center text-sm">
-              <Zap class="mr-2 h-4 w-4" />
+              <Zap class="mr-2 h-4 w-4 text-amber-500" />
               <span>{{ item.lightning }}</span>
             </div>