69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import { Component, Input } from '@angular/core';
|
|
import { RouterModule } from '@angular/router';
|
|
|
|
export interface BreadcrumbItem {
|
|
label: string;
|
|
url?: string;
|
|
icon?: string;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-breadcrumbs',
|
|
standalone: true,
|
|
imports: [CommonModule, RouterModule],
|
|
template: `
|
|
<nav aria-label="Breadcrumb" class="mb-4">
|
|
<ol
|
|
class="flex flex-wrap items-center text-sm text-neutral-600"
|
|
itemscope
|
|
itemtype="https://schema.org/BreadcrumbList"
|
|
>
|
|
@for (item of breadcrumbs; track $index) {
|
|
<li
|
|
class="inline-flex items-center"
|
|
itemprop="itemListElement"
|
|
itemscope
|
|
itemtype="https://schema.org/ListItem"
|
|
>
|
|
@if ($index > 0) {
|
|
<span class="inline-flex items-center mx-2 text-neutral-400 select-none">
|
|
<i class="fas fa-chevron-right text-xs"></i>
|
|
</span>
|
|
}
|
|
|
|
@if (item.url && $index < breadcrumbs.length - 1) {
|
|
<a
|
|
[routerLink]="item.url"
|
|
class="inline-flex items-center hover:text-blue-600 transition-colors"
|
|
itemprop="item"
|
|
>
|
|
@if (item.icon) {
|
|
<i [class]="item.icon + ' mr-1'"></i>
|
|
}
|
|
<span itemprop="name">{{ item.label }}</span>
|
|
</a>
|
|
} @else {
|
|
<span
|
|
class="inline-flex items-center font-semibold text-neutral-900"
|
|
itemprop="item"
|
|
>
|
|
@if (item.icon) {
|
|
<i [class]="item.icon + ' mr-1'"></i>
|
|
}
|
|
<span itemprop="name">{{ item.label }}</span>
|
|
</span>
|
|
}
|
|
|
|
<meta itemprop="position" [content]="($index + 1).toString()" />
|
|
</li>
|
|
}
|
|
</ol>
|
|
</nav>
|
|
`,
|
|
styles: []
|
|
})
|
|
export class BreadcrumbsComponent {
|
|
@Input() breadcrumbs: BreadcrumbItem[] = [];
|
|
}
|