create directory grid and card components

src/components/directory/DirectoryCard.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { type DirectoryItem } from '@/types/directory'
+import { MapPin, Phone, ExternalLink } from 'lucide-vue-next'
+
+defineProps<{
+  item: DirectoryItem
+}>()
+
+const categoryColors = {
+  restaurant: 'bg-orange-100 text-orange-800',
+  taxi: 'bg-yellow-100 text-yellow-800',
+  ferry: 'bg-blue-100 text-blue-800',
+  retail: 'bg-green-100 text-green-800',
+  other: 'bg-gray-100 text-gray-800'
+}
+</script>
+
+<template>
+  <div class="rounded-lg border bg-card text-card-foreground shadow-sm hover:shadow-md transition-shadow">
+    <div 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"
+        />
+      </div>
+      
+      <!-- Content -->
+      <div class="space-y-3">
+        <div class="flex items-start justify-between">
+          <h3 class="font-semibold text-lg">{{ item.name }}</h3>
+          <span 
+            class="rounded-full px-2.5 py-0.5 text-xs font-semibold"
+            :class="categoryColors[item.category]"
+          >
+            {{ item.category }}
+          </span>
+        </div>
+
+        <p class="text-sm text-muted-foreground">
+          {{ item.description }}
+        </p>
+
+        <!-- Contact Info -->
+        <div class="space-y-2">
+          <div v-if="item.address" class="flex items-center text-sm">
+            <MapPin class="mr-2 h-4 w-4" />
+            <span>{{ item.address }}</span>
+          </div>
+          
+          <div v-if="item.contact" class="flex items-center text-sm">
+            <Phone class="mr-2 h-4 w-4" />
+            <span>{{ item.contact }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>