46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
|
import { forwardRef } from 'react'
|
||
|
|
import classNames from 'classnames'
|
||
|
|
import { HiChevronRight, HiFolder, HiHome } from 'react-icons/hi2'
|
||
|
|
import type { BreadcrumbItem } from '@/types/fileManagement'
|
||
|
|
|
||
|
|
export interface BreadcrumbProps {
|
||
|
|
items: BreadcrumbItem[]
|
||
|
|
onNavigate: (item: BreadcrumbItem) => void
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
|
||
|
|
const { items, onNavigate, className } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={classNames('flex items-center space-x-1 text-sm', className)}>
|
||
|
|
{items.map((item, index) => (
|
||
|
|
<div key={item.path} className="flex items-center">
|
||
|
|
{index > 0 && <HiChevronRight className="mx-2 h-4 w-4 text-gray-400" />}
|
||
|
|
<button
|
||
|
|
onClick={() => onNavigate(item)}
|
||
|
|
className={classNames(
|
||
|
|
'flex items-center px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors',
|
||
|
|
index === items.length - 1
|
||
|
|
? 'text-gray-900 dark:text-gray-100 font-medium cursor-default'
|
||
|
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100',
|
||
|
|
)}
|
||
|
|
disabled={index === items.length - 1}
|
||
|
|
>
|
||
|
|
{index === 0 ? (
|
||
|
|
<HiHome className="h-4 w-4 mr-1" />
|
||
|
|
) : (
|
||
|
|
<HiFolder className="h-4 w-4 mr-1" />
|
||
|
|
)}
|
||
|
|
<span className="truncate max-w-32">{item.name}</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
|
||
|
|
Breadcrumb.displayName = 'Breadcrumb'
|
||
|
|
|
||
|
|
export default Breadcrumb
|