breadcrumb.tsx

"use client";

import { useEffect, useState } from "react";
import { IBreadcrumb } from "@/types";
import { BreadcrumbItem } from "@/components";
import { usePathname } from "next/navigation";

export const Breadcrumb = () => {
	const pathname = usePathname();
	const [breadcrumbs, setBreadcrumbs] = useState<IBreadcrumb[]>([]);
	
	useEffect(() => {
		const path = pathname.replace("/#.*", "");
		
		const pathWithoutQuery = path.split("?")[0];
		let pathSegments = pathWithoutQuery.split("/");
		pathSegments.shift();
		pathSegments = pathSegments.filter(path => path !== "");
		
		const breadcrumb = pathSegments.map((path, index) => {
			const href = "/" + pathSegments.slice(0, index + 1).join("/");
			const label = path;
			const isCurrent = index === pathSegments.length - 1;
			
			return { href, label, isCurrent };
		});
		
		setBreadcrumbs(breadcrumb);
	}, [pathname]);
	
	return (
		<ol className="flex space-x-2">
			<BreadcrumbItem isRoot href="/">~</BreadcrumbItem>
			{ breadcrumbs && breadcrumbs.map(({ href, label, isCurrent }) => (
				<BreadcrumbItem href={ href } key={ href } isCurrent={ isCurrent }>
					{ label }
				</BreadcrumbItem>
			)) }
		</ol>
	);
};