128 lines
4.4 KiB
TypeScript
128 lines
4.4 KiB
TypeScript
import React from "react";
|
|
import Link from "../layout/Link";
|
|
import Divider from "../layout/Divider";
|
|
import Row from "../layout/Row";
|
|
import lowerToTitleCase from "../utils/lower-to-title-case";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
type LinkObject = {
|
|
title: string;
|
|
path: string;
|
|
};
|
|
type Props = {
|
|
excludeRegexMatch?: RegExp;
|
|
};
|
|
|
|
/**
|
|
* # TWUI Breadcrumbs
|
|
* @className `twui-current-breadcrumb-link`
|
|
* @className `twui-current-breadcrumb-wrapper`
|
|
*/
|
|
export default function Breadcrumbs({ excludeRegexMatch }: Props) {
|
|
const [links, setLinks] = React.useState<LinkObject[] | null>(null);
|
|
const [current, setCurrent] = React.useState(false);
|
|
|
|
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(/./)) {
|
|
return;
|
|
}
|
|
|
|
if (excludeRegexMatch && excludeRegexMatch.test(linkText)) 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 (
|
|
<div
|
|
className={twMerge(
|
|
"overflow-x-auto max-w-[70vw]",
|
|
"twui-current-breadcrumb-wrapper"
|
|
)}
|
|
>
|
|
<Row className="gap-4 flex-nowrap whitespace-nowrap overflow-x-auto w-full">
|
|
{links.map((linkObject, index, array) => {
|
|
const isTarget = array.length - 1 == index;
|
|
|
|
if (index === links.length - 1) {
|
|
return (
|
|
<Link
|
|
key={index}
|
|
href={linkObject.path}
|
|
className={twMerge(
|
|
"text-slate-400 dark:text-slate-500 pointer-events-none text-xs",
|
|
isTarget ? "current" : "",
|
|
"twui-current-breadcrumb-link"
|
|
)}
|
|
>
|
|
{linkObject.title}
|
|
</Link>
|
|
);
|
|
} else {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<Link
|
|
href={linkObject.path}
|
|
className={twMerge(
|
|
"text-xs",
|
|
isTarget ? "current" : "",
|
|
"twui-current-breadcrumb-link"
|
|
)}
|
|
>
|
|
{linkObject.title}
|
|
</Link>
|
|
<Divider vertical />
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
})}
|
|
</Row>
|
|
</div>
|
|
);
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
}
|
|
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|