a programming education platform
www.hypercommit.com
education
1import * as React from "react"
2import { mergeProps } from "@base-ui/react/merge-props"
3import { useRender } from "@base-ui/react/use-render"
4import { HugeiconsIcon } from "@hugeicons/react"
5import {
6 ArrowRight01Icon,
7 MoreHorizontalIcon,
8} from "@hugeicons/core-free-icons"
9
10import { cn } from "@workspace/ui/lib/utils"
11
12function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
13 return (
14 <nav
15 aria-label="breadcrumb"
16 data-slot="breadcrumb"
17 className={cn(className)}
18 {...props}
19 />
20 )
21}
22
23function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
24 return (
25 <ol
26 data-slot="breadcrumb-list"
27 className={cn(
28 "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
29 className
30 )}
31 {...props}
32 />
33 )
34}
35
36function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
37 return (
38 <li
39 data-slot="breadcrumb-item"
40 className={cn("inline-flex items-center gap-1", className)}
41 {...props}
42 />
43 )
44}
45
46function BreadcrumbLink({
47 className,
48 render,
49 ...props
50}: useRender.ComponentProps<"a">) {
51 return useRender({
52 defaultTagName: "a",
53 props: mergeProps<"a">(
54 {
55 className: cn(
56 "text-primary transition-colors hover:text-primary/80",
57 className
58 ),
59 },
60 props
61 ),
62 render,
63 state: {
64 slot: "breadcrumb-link",
65 },
66 })
67}
68
69function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
70 return (
71 <span
72 data-slot="breadcrumb-page"
73 role="link"
74 aria-disabled="true"
75 aria-current="page"
76 className={cn("font-normal text-foreground", className)}
77 {...props}
78 />
79 )
80}
81
82function BreadcrumbSeparator({
83 children,
84 className,
85 ...props
86}: React.ComponentProps<"li">) {
87 return (
88 <li
89 data-slot="breadcrumb-separator"
90 role="presentation"
91 aria-hidden="true"
92 className={cn("[&>svg]:size-3.5", className)}
93 {...props}
94 >
95 {children ?? (
96 <HugeiconsIcon icon={ArrowRight01Icon} className="rtl:rotate-180" />
97 )}
98 </li>
99 )
100}
101
102function BreadcrumbEllipsis({
103 className,
104 ...props
105}: React.ComponentProps<"span">) {
106 return (
107 <span
108 data-slot="breadcrumb-ellipsis"
109 role="presentation"
110 aria-hidden="true"
111 className={cn(
112 "flex size-5 items-center justify-center [&>svg]:size-4",
113 className
114 )}
115 {...props}
116 >
117 <HugeiconsIcon icon={MoreHorizontalIcon} />
118 <span className="sr-only">More</span>
119 </span>
120 )
121}
122
123export {
124 Breadcrumb,
125 BreadcrumbList,
126 BreadcrumbItem,
127 BreadcrumbLink,
128 BreadcrumbPage,
129 BreadcrumbSeparator,
130 BreadcrumbEllipsis,
131}