60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { ReactNode } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
interface BreadcrumbProps {
|
|
items: Array<{
|
|
label: string;
|
|
path?: string;
|
|
icon?: ReactNode;
|
|
}>;
|
|
className?: string;
|
|
}
|
|
|
|
export const Breadcrumb: React.FC<BreadcrumbProps> = ({
|
|
items,
|
|
className = "",
|
|
}) => {
|
|
return (
|
|
<nav className={className}>
|
|
<ol className="flex items-center gap-1.5">
|
|
{items.map((item, index) => (
|
|
<li key={index} className="flex items-center gap-1.5">
|
|
{index > 0 && (
|
|
<svg
|
|
className="stroke-current text-gray-400"
|
|
width="17"
|
|
height="16"
|
|
viewBox="0 0 17 16"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
|
|
stroke=""
|
|
strokeWidth="1.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
)}
|
|
{item.path && index < items.length - 1 ? (
|
|
<Link
|
|
to={item.path}
|
|
className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
|
>
|
|
{item.icon && <span>{item.icon}</span>}
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className="text-sm text-gray-800 dark:text-white/90">
|
|
{item.icon && <span className="mr-1.5">{item.icon}</span>}
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
};
|
|
|