index.tsx76 lines · main

1	'use client'
2
3	import React from 'react'
4	import { cn } from 'ui'
5	import { Breadcrumb } from 'ui/src/components/shadcn/ui/breadcrumb'
6
7	import { PageContainer } from '../PageContainer'
8
9	const pageChromeClassName = 'px-4 xl:px-4'
10
11	// ============================================================================
12	// Actions
13	// ============================================================================
14
15	export type PageBreadcrumbsActionsProps = React.ComponentProps<'div'>
16
17	/**
18	* Actions for the page breadcrumbs row.
19	* Pass as the `actions` prop on `PageBreadcrumbs`.
20	*/
21	const PageBreadcrumbsActions = ({ className, ...props }: PageBreadcrumbsActionsProps) => {
22	return (
23	<div
24	data-slot="page-breadcrumbs-actions"
25	className={cn('ml-auto flex shrink-0 items-center gap-2', className)}
26	{...props}
27	/>
28	)
29	}
30	PageBreadcrumbsActions.displayName = 'PageBreadcrumbsActions'
31
32	// ============================================================================
33	// Breadcrumbs
34	// ============================================================================
35
36	export type PageBreadcrumbsProps = React.ComponentProps<typeof Breadcrumb> & {
37	actions?: React.ReactNode
38	containerClassName?: string
39	}
40
41	/**
42	* Full-width breadcrumb row for page chrome.
43	* Sits above `PageHeader` and page content — not inside `PageHeader`.
44	*/
45	const PageBreadcrumbs = ({
46	actions,
47	className,
48	children,
49	containerClassName,
50	...props
51	}: PageBreadcrumbsProps) => {
52	return (
53	<div data-slot="page-breadcrumbs" className="border-b">
54	<PageContainer
55	size="full"
56	className={cn(
57	'flex min-h-12 items-center justify-between gap-4 py-2',
58	pageChromeClassName,
59	containerClassName
60	)}
61	>
62	<Breadcrumb
63	data-slot="page-breadcrumbs-list"
64	className={cn('min-w-0 flex items-center gap-4 [&_li]:text-sm', className)}
65	{...props}
66	>
67	{children}
68	</Breadcrumb>
69	{actions}
70	</PageContainer>
71	</div>
72	)
73	}
74	PageBreadcrumbs.displayName = 'PageBreadcrumbs'
75
76	export { PageBreadcrumbs, PageBreadcrumbsActions }