initial layout with navbar and pages

src/components/directory/DirectoryGrid.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import DirectoryCard from './DirectoryCard.vue'
 import { type DirectoryItem } from '@/types/directory'
 import DirectoryFilter from './DirectoryFilter.vue'
@@ -15,7 +15,7 @@ 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())
+      item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
     return matchesCategory && matchesSearch
   })
 })
@@ -25,29 +25,19 @@ const filteredItems = computed(() => {
   <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"
-      />
+      <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"
-      />
+      <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"
-    >
+    <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> 
+</template>