Ubuntu
17 lines
3.3 KiB
JSON
17 lines
3.3 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "breadcrumb",
|
|
"type": "registry:component",
|
|
"title": "Breadcrumb",
|
|
"dependencies": [
|
|
"@radix-ui/react-slot"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "components/retroui/Breadcrumb.tsx",
|
|
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nconst BreadcrumbRoot = React.forwardRef<\n HTMLElement,\n React.ComponentPropsWithoutRef<\"nav\">\n>(({ className, ...props }, ref) => (\n <nav\n ref={ref}\n aria-label=\"breadcrumb\"\n className={cn(\"w-full text-sm\", className)}\n {...props}\n />\n))\nBreadcrumbRoot.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n HTMLOListElement,\n React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n <ol\n ref={ref}\n className={cn(\n \"flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-muted-foreground\",\n className\n )}\n {...props}\n />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n <li ref={ref} className={cn(\"inline-flex items-center\", className)} {...props} />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentPropsWithoutRef<\"a\"> & { asChild?: boolean }\n>(({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : \"a\"\n return (\n <Comp\n ref={ref}\n className={cn(\n \"font-medium transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring rounded-sm\",\n className\n )}\n {...props}\n />\n )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n aria-current=\"page\"\n className={cn(\"text-foreground font-semibold\", className)}\n {...props}\n />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) => (\n <li\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\"text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\", className)}\n {...props}\n >\n {children ?? <ChevronRight />}\n </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n <span\n role=\"presentation\"\n className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n {...props}\n >\n <MoreHorizontal className=\"h-4 w-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\n\nconst Breadcrumb = Object.assign(BreadcrumbRoot, {\n List: BreadcrumbList,\n Item: BreadcrumbItem,\n Link: BreadcrumbLink,\n Page: BreadcrumbPage,\n Separator: BreadcrumbSeparator,\n Ellipsis: BreadcrumbEllipsis,\n})\n\nexport { Breadcrumb }\n\n\n",
|
|
"type": "registry:component",
|
|
"target": "components/retroui/Breadcrumb.tsx"
|
|
}
|
|
]
|
|
} |