27 lines
935 B
Vue
27 lines
935 B
Vue
<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>
|