breadcrumb.jsx 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import * as React from "react"
  2. import { Slot } from "@radix-ui/react-slot"
  3. import { ChevronRight, MoreHorizontal } from "lucide-react"
  4. import { cn } from "@/lib/utils"
  5. function Breadcrumb({
  6. ...props
  7. }) {
  8. return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
  9. }
  10. function BreadcrumbList({
  11. className,
  12. ...props
  13. }) {
  14. return (
  15. <ol
  16. data-slot="breadcrumb-list"
  17. className={cn(
  18. "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
  19. className
  20. )}
  21. {...props} />
  22. );
  23. }
  24. function BreadcrumbItem({
  25. className,
  26. ...props
  27. }) {
  28. return (
  29. <li
  30. data-slot="breadcrumb-item"
  31. className={cn("inline-flex items-center gap-1.5", className)}
  32. {...props} />
  33. );
  34. }
  35. function BreadcrumbLink({
  36. asChild,
  37. className,
  38. ...props
  39. }) {
  40. const Comp = asChild ? Slot : "a"
  41. return (
  42. <Comp
  43. data-slot="breadcrumb-link"
  44. className={cn("hover:text-foreground transition-colors", className)}
  45. {...props} />
  46. );
  47. }
  48. function BreadcrumbPage({
  49. className,
  50. ...props
  51. }) {
  52. return (
  53. <span
  54. data-slot="breadcrumb-page"
  55. role="link"
  56. aria-disabled="true"
  57. aria-current="page"
  58. className={cn("text-foreground font-normal", className)}
  59. {...props} />
  60. );
  61. }
  62. function BreadcrumbSeparator({
  63. children,
  64. className,
  65. ...props
  66. }) {
  67. return (
  68. <li
  69. data-slot="breadcrumb-separator"
  70. role="presentation"
  71. aria-hidden="true"
  72. className={cn("[&>svg]:size-3.5", className)}
  73. {...props}>
  74. {children ?? <ChevronRight />}
  75. </li>
  76. );
  77. }
  78. function BreadcrumbEllipsis({
  79. className,
  80. ...props
  81. }) {
  82. return (
  83. <span
  84. data-slot="breadcrumb-ellipsis"
  85. role="presentation"
  86. aria-hidden="true"
  87. className={cn("flex size-9 items-center justify-center", className)}
  88. {...props}>
  89. <MoreHorizontal className="size-4" />
  90. <span className="sr-only">More</span>
  91. </span>
  92. );
  93. }
  94. export {
  95. Breadcrumb,
  96. BreadcrumbList,
  97. BreadcrumbItem,
  98. BreadcrumbLink,
  99. BreadcrumbPage,
  100. BreadcrumbSeparator,
  101. BreadcrumbEllipsis,
  102. }