66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { Link, useMatches } from '@remix-run/react';
|
|
|
|
interface BreadcrumbItem {
|
|
title: string;
|
|
to?: string;
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
items?: BreadcrumbItem[];
|
|
className?: string;
|
|
}
|
|
|
|
interface Handle {
|
|
breadcrumb: string | ((data: any) => string);
|
|
}
|
|
|
|
interface Match {
|
|
handle?: Handle;
|
|
pathname: string;
|
|
data: any;
|
|
}
|
|
|
|
export function Breadcrumb({ items = [], className = '' }: BreadcrumbProps) {
|
|
const matches = useMatches() as Match[];
|
|
const breadcrumbs = items.length > 0 ? items : matches
|
|
.filter(match => match.handle?.breadcrumb)
|
|
.map(match => ({
|
|
title: typeof match.handle?.breadcrumb === 'function'
|
|
? match.handle.breadcrumb(match.data)
|
|
: match.handle?.breadcrumb,
|
|
to: match.pathname
|
|
}));
|
|
|
|
if (breadcrumbs.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<nav className={`mb-4 ${className}`} aria-label="面包屑导航">
|
|
<ol className="flex items-center space-x-2 text-sm text-gray-500">
|
|
<li>
|
|
<Link to="/" className="hover:text-primary-600 flex items-center">
|
|
<i className="ri-home-line mr-1" />
|
|
首页
|
|
</Link>
|
|
</li>
|
|
|
|
{breadcrumbs.map((item, index) => (
|
|
<li key={index} className="flex items-center">
|
|
<i className="ri-arrow-right-s-line mx-1 text-gray-400" />
|
|
{index === breadcrumbs.length - 1 ? (
|
|
<span className="text-gray-900 font-medium">{item.title}</span>
|
|
) : (
|
|
<Link
|
|
to={item.to || '#'}
|
|
className="hover:text-primary-600"
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
}
|