new-personal-site/components/lib/elements/Breadcrumbs.tsx

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(/./) || 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>
    );
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
}

/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */