Initialer Laravel Commit für BetiX

resources/js/components/AppHeader.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { BreadcrumbItem } from '@/types';
+
+const props = withDefaults(defineProps<{
+  breadcrumbs?: BreadcrumbItem[];
+}>(), {
+  breadcrumbs: () => [],
+});
+</script>
+
+<template>
+  <header class="w-full border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <div class="container mx-auto flex h-14 items-center gap-2 px-4">
+      <nav v-if="props.breadcrumbs?.length" class="flex items-center gap-2 text-sm text-muted-foreground">
+        <template v-for="(item, idx) in props.breadcrumbs" :key="idx">
+          <a v-if="item.href" :href="item.href" class="hover:underline">{{ item.title }}</a>
+          <span v-else>{{ item.title }}</span>
+          <span v-if="idx < (props.breadcrumbs!.length - 1)" aria-hidden="true">/</span>
+        </template>
+      </nav>
+      <div class="ml-auto">
+        <slot name="actions" />
+      </div>
+    </div>
+  </header>
+</template>