Lemma Breadcrumbs

1"use client"
2 
3import * as React from "react"
4import {
5  Breadcrumb,
6  BreadcrumbEllipsis,
7  BreadcrumbItem,
8  BreadcrumbLink,
9  BreadcrumbList,
10  BreadcrumbPage,
11  BreadcrumbSeparator,
12} from "@/components/lemma/ui/breadcrumb"
13import { cn } from "@/components/lemma/lib/utils"
14 
15export type LemmaBreadcrumbAppearance = "default" | "minimal" | "borderless" | "contained"
16export type LemmaBreadcrumbDensity = "compact" | "comfortable" | "spacious"
17export type LemmaBreadcrumbRadius = "none" | "sm" | "md" | "lg" | "xl"
18 
19export interface LemmaBreadcrumbItem {
20  label: React.ReactNode
21  href?: string
22  title?: string
23  icon?: React.ReactNode
24  current?: boolean
25  onClick?: () => void
26}
27 
28export interface LemmaBreadcrumbsProps {
29  items: LemmaBreadcrumbItem[]
30  maxItems?: number
31  appearance?: LemmaBreadcrumbAppearance
32  density?: LemmaBreadcrumbDensity
33  radius?: LemmaBreadcrumbRadius
34  className?: string
35  onNavigate?: (item: LemmaBreadcrumbItem) => void
36}
37 
38export function LemmaBreadcrumbs({
39  items,
40  maxItems = 5,
41  appearance = "default",
42  density = "comfortable",
43  radius = "lg",
44  className,
45  onNavigate,
46}: LemmaBreadcrumbsProps) {
47  const visibleItems = React.useMemo(() => collapseBreadcrumbItems(items, maxItems), [items, maxItems])
48 
49  if (items.length === 0) return null
50 
51  return (
52    <Breadcrumb
53      data-appearance={appearance}
54      data-density={density}
55      data-radius={radius}
56      className={cn("min-w-0", className)}
57    >
58      <BreadcrumbList className={cn("flex-nowrap", densityClassName(density))}>
59        {visibleItems.map((item, index) => {
60          const isEllipsis = item === null
61          const isLast = index === visibleItems.length - 1
62          const current = !isEllipsis && (item.current || isLast)
63 
64          return (
65            <React.Fragment key={isEllipsis ? `ellipsis-${index}` : `${item.title ?? item.href ?? index}`}>
66              {index > 0 ? <BreadcrumbSeparator className="shrink-0" /> : null}
67              <BreadcrumbItem className="min-w-0">
68                {isEllipsis ? (
69                  <BreadcrumbEllipsis className={cn("text-muted-foreground", radiusClassName(radius))} />
70                ) : current ? (
71                  <BreadcrumbPage
72                    title={item.title}
73                    className={cn("inline-flex min-w-0 max-w-64 items-center gap-1.5 truncate font-medium", pageClassName(appearance))}
74                  >
75// … truncated