| 1 | import type { ComponentProps, ReactNode } from "react"; |
| 2 | |
| 3 | import { cn } from "../lib/utils"; |
| 4 | |
| 5 | interface WorkspaceBreadcrumbProps { |
| 6 | readonly ariaLabel: string; |
| 7 | readonly children: ReactNode; |
| 8 | readonly className?: string; |
| 9 | } |
| 10 | |
| 11 | export function WorkspaceBreadcrumb({ ariaLabel, children, className }: WorkspaceBreadcrumbProps) { |
| 12 | return ( |
| 13 | <nav aria-label={ariaLabel} className={cn("min-w-0", className)}> |
| 14 | {/* Keep the flexible container draggable in Electron. Interactive |
| 15 | descendants are excluded by the shared .drag-region CSS rules. */} |
| 16 | <ol className="m-0 flex min-w-0 list-none items-center gap-2 p-0 text-sm sm:gap-3"> |
| 17 | {children} |
| 18 | </ol> |
| 19 | </nav> |
| 20 | ); |
| 21 | } |
| 22 | |
| 23 | interface WorkspaceBreadcrumbItemProps { |
| 24 | readonly children: ReactNode; |
| 25 | readonly className?: string; |
| 26 | readonly current?: boolean; |
| 27 | } |
| 28 | |
| 29 | export function WorkspaceBreadcrumbText({ children, className, ...props }: ComponentProps<"span">) { |
| 30 | return ( |
| 31 | <span |
| 32 | data-slot="workspace-breadcrumb-text" |
| 33 | // Center the capital letters with adjacent icons, not the font's leading. |
| 34 | // Padding preserves accents and descenders when a label is truncated. |
| 35 | className={cn( |
| 36 | "block min-w-0 truncate [text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both_cap_alphabetic]:py-1.5", |
| 37 | className, |
| 38 | )} |
| 39 | {...props} |
| 40 | > |
| 41 | {children} |
| 42 | </span> |
| 43 | ); |
| 44 | } |
| 45 | |
| 46 | export function WorkspaceBreadcrumbItem({ |
| 47 | children, |
| 48 | className, |
| 49 | current = false, |
| 50 | }: WorkspaceBreadcrumbItemProps) { |
| 51 | return ( |
| 52 | <li |
| 53 | aria-current={current ? "page" : undefined} |
| 54 | className={cn( |
| 55 | "flex min-w-0 items-center font-medium", |
| 56 | current ? "text-foreground" : "shrink-0 text-muted-foreground", |
| 57 | className, |
| 58 | )} |
| 59 | > |
| 60 | {children} |
| 61 | </li> |
| 62 | ); |
| 63 | } |
| 64 | |
| 65 | export function WorkspaceBreadcrumbSeparator({ |
| 66 | className, |
| 67 | children = "/", |
| 68 | }: { |
| 69 | readonly className?: string; |
| 70 | readonly children?: ReactNode; |
| 71 | }) { |
| 72 | return ( |
| 73 | <li aria-hidden="true" className={cn("flex shrink-0 items-center text-icon-muted", className)}> |
| 74 | {children} |
| 75 | </li> |
| 76 | ); |
| 77 | } |