95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import Link from "../layout/Link";
|
||
|
|
import Divider from "../layout/Divider";
|
||
|
|
import Row from "../layout/Row";
|
||
|
|
import lowerToTitleCase from "@/server-client-shared/utils/lower-to-title-case";
|
||
|
|
|
||
|
|
type LinkObject = {
|
||
|
|
title: string;
|
||
|
|
path: string;
|
||
|
|
};
|
||
|
|
export default function Breadcrumbs() {
|
||
|
|
const [links, setLinks] = React.useState<LinkObject[] | null>(null);
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
let pathname = window.location.pathname;
|
||
|
|
let pathLinks = pathname.split("/");
|
||
|
|
|
||
|
|
let validPathLinks = [];
|
||
|
|
|
||
|
|
validPathLinks.push({
|
||
|
|
title: "Home",
|
||
|
|
path: pathname.match(/admin/) ? "/admin" : "/",
|
||
|
|
});
|
||
|
|
|
||
|
|
pathLinks.forEach((linkText, index, array) => {
|
||
|
|
if (!linkText?.match(/./) || index == 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
validPathLinks.push({
|
||
|
|
title: lowerToTitleCase(linkText),
|
||
|
|
path: (() => {
|
||
|
|
let path = "";
|
||
|
|
|
||
|
|
for (let i = 0; i < array.length; i++) {
|
||
|
|
const lnText = array[i];
|
||
|
|
if (i > index || !lnText.match(/./)) continue;
|
||
|
|
|
||
|
|
path += `/${lnText}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
return path;
|
||
|
|
})(),
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
setLinks(validPathLinks);
|
||
|
|
|
||
|
|
return function () {
|
||
|
|
setLinks(null);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (!links?.[1]) {
|
||
|
|
return <React.Fragment></React.Fragment>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Row className="gap-4">
|
||
|
|
{links.map((linkObject, index, array) => {
|
||
|
|
if (index === links.length - 1) {
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={index}
|
||
|
|
href={linkObject.path}
|
||
|
|
className="text-slate-400 dark:text-slate-500 pointer-events-none text-xs"
|
||
|
|
>
|
||
|
|
{linkObject.title}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<React.Fragment key={index}>
|
||
|
|
<Link href={linkObject.path} className="text-xs">
|
||
|
|
{linkObject.title}
|
||
|
|
</Link>
|
||
|
|
<Divider vertical />
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
})}
|
||
|
|
</Row>
|
||
|
|
);
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
}
|
||
|
|
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|