86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
interface BreadcrumbPath {
|
|
name: string;
|
|
href: string;
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
pageTitle: string;
|
|
paths?: BreadcrumbPath[];
|
|
}
|
|
|
|
const PageBreadcrumb: React.FC<BreadcrumbProps> = ({ pageTitle, paths }) => {
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-between gap-3 mb-6 sticky top-0 z-40 bg-linear-to-b from-gray-50 via-gray-50/60 to-transparent backdrop-blur-xs pb-8 pt-8">
|
|
<h2
|
|
className="text-xl font-semibold text-gray-800 dark:text-white/90"
|
|
x-text="pageName"
|
|
>
|
|
{pageTitle}
|
|
</h2>
|
|
<nav>
|
|
<ol className="flex items-center gap-1.5">
|
|
<li>
|
|
<Link
|
|
className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white/90 transition-colors"
|
|
href="/"
|
|
>
|
|
Home
|
|
<svg
|
|
className="stroke-current"
|
|
width="17"
|
|
height="16"
|
|
viewBox="0 0 17 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
|
|
stroke=""
|
|
strokeWidth="1.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
</li>
|
|
{paths &&
|
|
paths.map((path, index) => (
|
|
<li key={index} className="flex items-center gap-1.5">
|
|
<Link
|
|
className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white/90 transition-colors"
|
|
href={path.href}
|
|
>
|
|
{path.name}
|
|
<svg
|
|
className="stroke-current"
|
|
width="17"
|
|
height="16"
|
|
viewBox="0 0 17 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
|
|
stroke=""
|
|
strokeWidth="1.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<li className="text-sm text-gray-800 dark:text-white/90">
|
|
{pageTitle}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PageBreadcrumb;
|