Breadcrumb

import {
    Breadcrumb,
    BreadcrumbEllipsis,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@stroeer-labs/design-library/react';

export function BreadcrumbDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Full trail</p>
                <Breadcrumb aria-label="Full trail example">
                    <BreadcrumbList>
                        <BreadcrumbItem>
                            <BreadcrumbLink href="#">Campaigns</BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator />
                        <BreadcrumbItem>
                            <BreadcrumbLink href="#">Q3 Outdoor</BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator />
                        <BreadcrumbItem>
                            <BreadcrumbPage>Line items</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Collapsed middle</p>
                <Breadcrumb aria-label="Collapsed trail example">
                    <BreadcrumbList>
                        <BreadcrumbItem>
                            <BreadcrumbLink href="#">Home</BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator />
                        <BreadcrumbItem aria-hidden="true">
                            <BreadcrumbEllipsis />
                        </BreadcrumbItem>
                        <BreadcrumbSeparator />
                        <BreadcrumbItem>
                            <BreadcrumbLink href="#">Fine tuning</BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator />
                        <BreadcrumbItem>
                            <BreadcrumbPage>Schedule</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Custom separator</p>
                <Breadcrumb aria-label="Custom separator example">
                    <BreadcrumbList>
                        <BreadcrumbItem>
                            <BreadcrumbLink href="#">Inventory</BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator>/</BreadcrumbSeparator>
                        <BreadcrumbItem>
                            <BreadcrumbPage>Prague</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {HlmBreadcrumbImports} from '@stroeer-labs/design-library/angular';

// Mirrors the React breadcrumb demo. Note the links carry plain `href` here too: this library deliberately does
// NOT compose Angular's RouterLink (see the component's PARITY NOTE), so an app adds `routerLink` itself.
@Component({
    selector: 'dl-breadcrumb-demo',
    standalone: true,
    imports: [HlmBreadcrumbImports],
    template: `
        <div class="space-y-6">
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">Full trail</p>
                <nav hlmBreadcrumb aria-label="Full trail example">
                    <ol hlmBreadcrumbList>
                        <li hlmBreadcrumbItem><a hlmBreadcrumbLink href="#">Campaigns</a></li>
                        <li hlmBreadcrumbSeparator></li>
                        <li hlmBreadcrumbItem><a hlmBreadcrumbLink href="#">Q3 Outdoor</a></li>
                        <li hlmBreadcrumbSeparator></li>
                        <li hlmBreadcrumbItem><span hlmBreadcrumbPage>Line items</span></li>
                    </ol>
                </nav>
            </div>
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">Collapsed middle</p>
                <nav hlmBreadcrumb aria-label="Collapsed trail example">
                    <ol hlmBreadcrumbList>
                        <li hlmBreadcrumbItem><a hlmBreadcrumbLink href="#">Home</a></li>
                        <li hlmBreadcrumbSeparator></li>
                        <li hlmBreadcrumbItem aria-hidden="true"><hlm-breadcrumb-ellipsis /></li>
                        <li hlmBreadcrumbSeparator></li>
                        <li hlmBreadcrumbItem><a hlmBreadcrumbLink href="#">Fine tuning</a></li>
                        <li hlmBreadcrumbSeparator></li>
                        <li hlmBreadcrumbItem><span hlmBreadcrumbPage>Schedule</span></li>
                    </ol>
                </nav>
            </div>
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">Custom separator</p>
                <nav hlmBreadcrumb aria-label="Custom separator example">
                    <ol hlmBreadcrumbList>
                        <li hlmBreadcrumbItem><a hlmBreadcrumbLink href="#">Inventory</a></li>
                        <li hlmBreadcrumbSeparator>/</li>
                        <li hlmBreadcrumbItem><span hlmBreadcrumbPage>Prague</span></li>
                    </ol>
                </nav>
            </div>
        </div>
    `,
})
export class BreadcrumbDemoComponent {}