create frontend directory

frontend/components/DirectoryEntry.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { DirectoryEntryType } from '~/types';
+
+const route = useRoute();
+
+const { name, entryType } = defineProps<{
+    name: string;
+    entryType: DirectoryEntryType;
+}>();
+
+const iconName = entryType === 'file' ? 'lucide:file' : 'lucide:folder';
+</script>
+
+<template>
+    <Button class="w-36 h-12" variant="outline" size="lg">
+        <NuxtLink
+            class="flex flex-row items-center gap-1.5"
+            :to="joinPaths(route.path, name)"
+        >
+            <Icon :name="iconName" />
+            <span>{{ name }}</span>
+        </NuxtLink>
+    </Button>
+</template>