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