43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import {
|
||
|
|
Breadcrumb,
|
||
|
|
BreadcrumbItem,
|
||
|
|
BreadcrumbLink,
|
||
|
|
BreadcrumbList,
|
||
|
|
BreadcrumbPage,
|
||
|
|
BreadcrumbSeparator,
|
||
|
|
} from '@/components/ui/breadcrumb';
|
||
|
|
import { Link } from '@inertiajs/vue3';
|
||
|
|
|
||
|
|
interface BreadcrumbItemType {
|
||
|
|
title: string;
|
||
|
|
href?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
breadcrumbs: BreadcrumbItemType[];
|
||
|
|
}>();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Breadcrumb>
|
||
|
|
<BreadcrumbList>
|
||
|
|
<template v-for="(item, index) in breadcrumbs" :key="index">
|
||
|
|
<BreadcrumbItem>
|
||
|
|
<template v-if="index === breadcrumbs.length - 1">
|
||
|
|
<BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<BreadcrumbLink as-child>
|
||
|
|
<Link :href="item.href ?? '#'">{{
|
||
|
|
item.title
|
||
|
|
}}</Link>
|
||
|
|
</BreadcrumbLink>
|
||
|
|
</template>
|
||
|
|
</BreadcrumbItem>
|
||
|
|
<BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
|
||
|
|
</template>
|
||
|
|
</BreadcrumbList>
|
||
|
|
</Breadcrumb>
|
||
|
|
</template>
|