41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React, { JSX, ReactElement } from 'react'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import { IComponentBaseProps } from '@/components/types'
|
|
|
|
import BreadcrumbsItem, { BreadcrumbsItemProps } from './BreadcrumbsItem'
|
|
|
|
export type BreadcrumbsProps = React.HTMLAttributes<HTMLDivElement> &
|
|
IComponentBaseProps & {
|
|
children?:
|
|
| ReactElement<BreadcrumbsItemProps>
|
|
| ReactElement<BreadcrumbsItemProps>[]
|
|
innerRef?: React.Ref<HTMLUListElement>
|
|
innerProps?: React.HTMLAttributes<HTMLUListElement>
|
|
}
|
|
|
|
const Breadcrumbs = React.forwardRef<HTMLDivElement, BreadcrumbsProps>(
|
|
(
|
|
{ children, dataTheme, className, innerProps, innerRef, ...props },
|
|
ref
|
|
): JSX.Element => {
|
|
const classes = twMerge('breadcrumbs', 'text-sm', className)
|
|
|
|
return (
|
|
<div
|
|
role="navigation"
|
|
aria-label="Breadcrumbs"
|
|
{...props}
|
|
data-theme={dataTheme}
|
|
className={classes}
|
|
ref={ref}
|
|
>
|
|
<ul {...innerProps} ref={innerRef}>
|
|
{children}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default Object.assign(Breadcrumbs, { Item: BreadcrumbsItem }) |