URL Parameter fct to a specific Directory Card entry

src/pages/DirectoryItem.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import DirectoryCard from '@/components/directory/DirectoryCard.vue'
+import { type DirectoryItem } from '@/types/directory'
+import { mockDirectoryItems } from '@/data/directory'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const props = defineProps<{
+  id: string
+}>()
+
+// This should eventually be replaced with an API call
+const item = ref<DirectoryItem | null>(null)
+const loading = ref(true)
+const error = ref(false)
+
+onMounted(async () => {
+  try {
+    const found = mockDirectoryItems.find(i => i.id === props.id)
+    if (!found) {
+      error.value = true
+      return
+    }
+
+    item.value = found
+  } catch (e) {
+    error.value = true
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <div class="max-w-2xl mx-auto">
+      <!-- Loading State -->
+      <div v-if="loading" class="text-center py-12">
+        <div class="animate-pulse">
+          <div class="h-8 bg-muted rounded w-3/4 mx-auto mb-4"></div>
+          <div class="h-4 bg-muted rounded w-1/2 mx-auto"></div>
+        </div>
+      </div>
+
+      <!-- Error State -->
+      <div v-else-if="error" class="text-center py-12">
+        <h2 class="text-xl font-semibold mb-2">{{ t('directory.itemNotFound') }}</h2>
+        <p class="text-muted-foreground mb-4">{{ t('directory.itemNotFoundDesc') }}</p>
+        <router-link to="/directory"
+          class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">
+          {{ t('directory.backToDirectory') }}
+        </router-link>
+      </div>
+
+      <!-- Directory Item -->
+      <template v-else-if="item">
+        <div class="mb-6">
+          <router-link to="/directory"
+            class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            ← {{ t('directory.backToDirectory') }}
+          </router-link>
+        </div>
+        <DirectoryCard :item="item" />
+      </template>
+    </div>
+  </div>
+</template>