breadcrumb

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { cva } from "class-variance-authority"
4import { MoreHorizontal } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import "./breadcrumb.css"
8 
9/* ------------------------------------------------------------------ */
10/*  CVA                                                                */
11/* ------------------------------------------------------------------ */
12 
13const breadcrumbLinkVariants = cva(
14  "breadcrumb-link text-content-caption transition-colors duration-150 outline-none"
15)
16 
17const breadcrumbPageVariants = cva(
18  "breadcrumb-page text-content-caption font-accent outline-none"
19)
20 
21const breadcrumbSeparatorVariants = cva(
22  "breadcrumb-separator text-content-caption"
23)
24 
25const breadcrumbEllipsisVariants = cva(
26  "breadcrumb-ellipsis inline-flex items-center justify-center rounded-[var(--layout-radius-sm)] p-[var(--layout-padding-xs)] outline-none"
27)
28 
29/* ------------------------------------------------------------------ */
30/*  Breadcrumb                                                         */
31/* ------------------------------------------------------------------ */
32 
33function Breadcrumb({
34  className,
35  ...props
36}: React.ComponentProps<"nav">) {
37  return (
38    <nav
39      data-slot="breadcrumb"
40      aria-label="breadcrumb"
41      className={cn(className)}
42      {...props}
43    />
44  )
45}
46 
47/* ------------------------------------------------------------------ */
48/*  BreadcrumbList                                                     */
49/* ------------------------------------------------------------------ */
50 
51function BreadcrumbList({
52  className,
53  ...props
54}: React.ComponentProps<"ol">) {
55  return (
56    <ol
57      data-slot="breadcrumb-list"
58      role="list"
59      className={cn(
60        "flex items-center gap-[var(--layout-gap-sm)]",
61        className
62      )}
63      {...props}
64    />
65  )
66}
67 
68/* ------------------------------------------------------------------ */
69/*  BreadcrumbItem                                                     */
70/* ------------------------------------------------------------------ */
71 
72function BreadcrumbItem({
73  className,
74  ...props
75}: React.ComponentProps<"li">) {
76  return (
77    <li
78      data-slot="breadcrumb-item"
79      className={cn("inline-flex items-center gap-[var(--layout-gap-sm)]", className)}
80      {...props}
81    />
82  )
83}
84 
85/* ------------------------------------------------------------------ */
86// … truncated