create directory grid and card components

src/components/directory/DirectoryGrid.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DirectoryCard from './DirectoryCard.vue'
+import { type DirectoryItem } from '@/types/directory'
+import DirectoryFilter from './DirectoryFilter.vue'
+
+const selectedCategory = ref<string>('all')
+const searchQuery = ref('')
+
+const props = defineProps<{
+  items: DirectoryItem[]
+}>()
+
+const filteredItems = computed(() => {
+  return props.items.filter(item => {
+    const matchesCategory = selectedCategory.value === 'all' || item.category === selectedCategory.value
+    const matchesSearch = item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+                         item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
+    return matchesCategory && matchesSearch
+  })
+})
+</script>
+
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <!-- Filters -->
+    <div class="mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
+      <DirectoryFilter 
+        v-model:category="selectedCategory"
+        v-model:search="searchQuery"
+      />
+    </div>
+
+    <!-- Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <DirectoryCard
+        v-for="item in filteredItems"
+        :key="item.id"
+        :item="item"
+      />
+    </div>
+
+    <!-- Empty State -->
+    <div 
+      v-if="filteredItems.length === 0"
+      class="text-center py-12"
+    >
+      <p class="text-lg text-muted-foreground">
+        No results found. Try adjusting your filters.
+      </p>
+    </div>
+  </div>
+</template>