1import type { ComponentProps, ReactNode } from "react";
2
3import { cn } from "../lib/utils";
4
5interface WorkspaceBreadcrumbProps {
6 readonly ariaLabel: string;
7 readonly children: ReactNode;
8 readonly className?: string;
9}
10
11export function WorkspaceBreadcrumb({ ariaLabel, children, className }: WorkspaceBreadcrumbProps) {
12 return (
13 <nav aria-label={ariaLabel} className={cn("min-w-0", className)}>
14 <ol className="m-0 flex min-w-0 list-none items-center gap-2 p-0 text-sm sm:gap-3">
15 {children}
16 </ol>
17 </nav>
18 );
19}
20
21interface WorkspaceBreadcrumbItemProps {
22 readonly children: ReactNode;
23 readonly className?: string;
24 readonly current?: boolean;
25}
26
27export function WorkspaceBreadcrumbText({ children, className, ...props }: ComponentProps<"span">) {
28 return (
29 <span
30 data-slot="workspace-breadcrumb-text"
31 className={cn(
32 "block min-w-0 truncate [text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both_cap_alphabetic]:py-1.5",
33 className,
34 )}
35 {...props}
36 >
37 {children}
38 </span>
39 );
40}
41
42export function WorkspaceBreadcrumbItem({
43 children,
44 className,
45 current = false,
46}: WorkspaceBreadcrumbItemProps) {
47 return (
48 <li
49 aria-current={current ? "page" : undefined}
50 className={cn(
51 "flex min-w-0 items-center font-medium",
52 current ? "text-foreground" : "shrink-0 text-muted-foreground",
53 className,
54 )}
55 >
56 {children}
57 </li>
58 );
59}
60
61export function WorkspaceBreadcrumbSeparator({
62 className,
63 children = "/",
64}: {
65 readonly className?: string;
66 readonly children?: ReactNode;
67}) {
68 return (
69 <li aria-hidden="true" className={cn("flex shrink-0 items-center text-icon-muted", className)}>
70 {children}
71 </li>
72 );
73}