flbxcup/resources/js/components/Breadcrumbs.svelte
2025-06-23 23:12:40 +02:00

34 lines
1,009 B
Svelte

<script lang="ts">
import { Breadcrumb, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Item } from '@/components/ui/breadcrumb';
import { Link } from '@inertiajs/svelte';
interface BreadcrumbItem {
title: string;
href?: string;
}
interface Props {
breadcrumbs: BreadcrumbItem[];
}
let { breadcrumbs }: Props = $props();
</script>
<Breadcrumb>
<BreadcrumbList>
{#each breadcrumbs as item, index (index)}
<Item>
{#if index === breadcrumbs.length - 1}
<BreadcrumbPage>{item.title}</BreadcrumbPage>
{:else}
<BreadcrumbLink>
<Link href={item.href ?? '#'}>{item.title}</Link>
</BreadcrumbLink>
{/if}
</Item>
{#if index !== breadcrumbs.length - 1}
<BreadcrumbSeparator />
{/if}
{/each}
</BreadcrumbList>
</Breadcrumb>