import Link from "next/link"; import { useRouter } from "next/router"; import { Children, Fragment, useEffect, useState } from "react"; type BreadcrumbProps = { children: React.ReactNode; }; export const Breadcrumb = ({ children }: BreadcrumbProps) => { const childrenArray = Children.toArray(children); const childrenSeperated = childrenArray.map((child, index) => { // If not the last item in the array insert a / if (index !== childrenArray.length - 1) { return ( {child} / ); } // Else return just the child return child; }); return ( ); }; type BreadcrumbItemProps = { children: React.ReactNode; href: string; listProps?: JSX.IntrinsicElements["li"]; }; export const BreadcrumbItem = ({ children, href, listProps }: BreadcrumbItemProps) => { return (
  • {children}
  • ); }; export const BreadcrumbContainer = () => { const router = useRouter(); const [, setBreadcrumbs] = useState<{ href: string; label: string }[]>(); useEffect(() => { const rawPath = router.asPath.split("?")[0]; // this will ignore any query params for now? let pathArray = rawPath.split("/"); pathArray.shift(); pathArray = pathArray.filter((path) => path !== ""); const allBreadcrumbs = pathArray.map((path, idx) => { const href = `/${pathArray.slice(0, idx + 1).join("/")}`; return { href, label: path.charAt(0).toUpperCase() + path.slice(1), }; }); setBreadcrumbs(allBreadcrumbs); }, [router.asPath]); }; export default Breadcrumb;