import React, { ComponentProps, ReactNode } 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"; import { ChevronLeft } from "lucide-react"; import Button from "../layout/Button"; type LinkObject = { title: string; path: string; }; type Props = { excludeRegexMatch?: RegExp; linkProps?: ComponentProps; currentLinkProps?: ComponentProps; dividerProps?: ComponentProps; backButtonProps?: ComponentProps; backButton?: boolean; pageUrl?: string; currentTitle?: string; skipHome?: boolean; divider?: ReactNode; }; /** * # TWUI Breadcrumbs * @className `twui-breadcrumb-link` * @className `twui-current-breadcrumb-wrapper` * @className `twui-breadcrumbs-divider` * @className `twui-breadcrumbs-back-button` */ export default function Breadcrumbs({ excludeRegexMatch, linkProps, currentLinkProps, dividerProps, backButton, backButtonProps, pageUrl, currentTitle, skipHome, divider, }: Props) { const [links, setLinks] = React.useState( pageUrl ? twuiBreadcrumbsGenerateLinksFromUrl({ url: pageUrl, skipHome }) : null ); React.useEffect(() => { if (links) return; let pathname = window.location.pathname; let validPathLinks = twuiBreadcrumbsGenerateLinksFromUrl({ url: pathname, excludeRegexMatch, skipHome, }); setLinks(validPathLinks); return function () { setLinks(null); }; }, []); if (!links?.[1]) { return ; } return ( ); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } export function twuiBreadcrumbsGenerateLinksFromUrl({ url, excludeRegexMatch, skipHome, }: { url: string; excludeRegexMatch?: RegExp; skipHome?: boolean; }) { let pathLinks = url.split("/"); let validPathLinks = []; if (!skipHome) { validPathLinks.push({ title: "Home", path: url.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; })(), }); }); return validPathLinks; }