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"; 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(/./)) { 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 flex-nowrap whitespace-nowrap overflow-x-auto w-full"> {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> ); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */