76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import * as React from "react";
|
|
import { Slot } from "@radix-ui/react-slot";
|
|
import { cn } from "~/lib/utils";
|
|
import { ChevronRightIcon, DotsHorizontalIcon } from "~/components/ui/icons/vendor";
|
|
import { t as i18nT } from "i18next";
|
|
|
|
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
|
return <nav aria-label={i18nT("components.breadcrumb.ariaLabel")} data-slot="breadcrumb" {...props} />;
|
|
}
|
|
|
|
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
|
return (
|
|
<ol
|
|
data-slot="breadcrumb-list"
|
|
// Subframe Breadcrumbs layout: BreadcrumbsRoot "flex items-center gap-2", 14px text
|
|
className={cn("text-text-neutral-tertiary flex flex-wrap items-center gap-2 text-sm leading-5 break-words", className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
|
// Subframe Breadcrumbs layout: uniform gap-2 between item content
|
|
return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-2", className)} {...props} />;
|
|
}
|
|
|
|
function BreadcrumbLink({
|
|
asChild,
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"a"> & {
|
|
asChild?: boolean;
|
|
}) {
|
|
const Comp = asChild ? Slot : "a";
|
|
|
|
return <Comp data-slot="breadcrumb-link" className={cn("hover:text-text-neutral-primary transition-colors", className)} {...props} />;
|
|
}
|
|
|
|
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
|
return (
|
|
<span
|
|
data-slot="breadcrumb-page"
|
|
role="link"
|
|
aria-disabled="true"
|
|
aria-current="page"
|
|
className={cn("text-text-neutral-primary font-normal", className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
|
|
return (
|
|
<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
|
|
{children ?? <ChevronRightIcon />}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
|
|
return (
|
|
<span
|
|
data-slot="breadcrumb-ellipsis"
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
className={cn("flex size-9 items-center justify-center", className)}
|
|
{...props}
|
|
>
|
|
<DotsHorizontalIcon className="size-4" />
|
|
<span className="sr-only">{i18nT("shared.more")}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };
|