Breadcrumb.tsx69 lines · main

1	// @ts-ignore
2	import { ChevronRight } from 'lucide-react'
3
4	import BreadcrumbStyle from './Breadcrumb.module.css'
5
6	interface Props {
7	children?: [React.ReactNode]
8	className?: string
9	style?: React.CSSProperties
10	spacing?: 'small' | 'medium' | 'large'
11	}
12
13	/**
14	* @deprecated Use `import { Breadcrumb_shadcn_ } from "ui"` instead
15	*/
16	const Breadcrumb = ({ className, style, children, spacing = 'small' }: Props) => {
17	let classes = [BreadcrumbStyle['sbui-breadcrumb--container']]
18	let separatorClasses = [BreadcrumbStyle['sbui-breadcrumb--separator']]
19
20	if (className) {
21	classes.push(className)
22	}
23
24	if (spacing) {
25	separatorClasses.push(`sbui-breadcrumb--separator-${spacing}`)
26	}
27
28	return (
29	<ol className={classes.join(' ')} style={style} aria-label="Breadcrumb">
30	{children!.map((child: React.ReactNode, idx: number) => (
31	<li className={BreadcrumbStyle['sbui-breadcrumb--item-container']}>
32	{child}
33	{idx + 1 < children!.length && (
34	<ChevronRight size={12} className={separatorClasses.join(' ')} aria-hidden="true" />
35	)}
36	</li>
37	))}
38	</ol>
39	)
40	}
41
42	interface ItemProps {
43	children: React.ReactNode
44	active?: boolean
45	onClick?: any
46	style?: React.CSSProperties
47	}
48
49	/**
50	* @deprecated Use ./BreadcrumbItem_shadcn_ instead
51	*/
52	export function Item({ children, active, onClick, style }: ItemProps) {
53	let classes = [BreadcrumbStyle['sbui-breadcrumb--item']]
54	if (active) classes.push(BreadcrumbStyle['sbui-breadcrumb--item__active'])
55	return (
56	<span
57	className={classes.join(' ')}
58	onClick={onClick}
59	style={style}
60	aria-current={active ? 'page' : false}
61	>
62	{children}
63	</span>
64	)
65	}
66
67	Breadcrumb.Item = Item
68
69	export default Breadcrumb