53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import { FormLayoutIcon } from "../icons";
|
|
import { BreadcrumbItem, BreadcrumbList } from "../ui/breadcrumb";
|
|
|
|
export const Breadcrumb = () => {
|
|
const [, setCurrentPage] = useState<React.Key>("");
|
|
const pathname = usePathname();
|
|
const pathnameSplit = pathname.split("/");
|
|
pathnameSplit.shift();
|
|
const pathnameTransformed = pathnameSplit.map((item) => {
|
|
const words = item.split("-");
|
|
const capitalizedWords = words.map(
|
|
(word) => word.charAt(0).toUpperCase() + word?.slice(1)
|
|
);
|
|
return capitalizedWords.join(" ");
|
|
});
|
|
|
|
console.log("pathname : ", pathnameTransformed);
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(pathnameSplit[pathnameSplit.length - 1]);
|
|
}, [pathnameSplit]);
|
|
|
|
return (
|
|
<>
|
|
<div className=" h-[100px] gap-0 grid rounded-lg border-small m-1 md:m-0 md:ml-4">
|
|
<div className="mx-2 md:px-6 ">
|
|
<div className="flex flex-row justify-between items-center">
|
|
<div className="pt-1 w-full">
|
|
<p className="text-2xl font-semibold mb-2">
|
|
{pathnameTransformed[pathnameTransformed.length - 1]}
|
|
</p>
|
|
<BreadcrumbList>
|
|
{pathnameTransformed?.map((item, index) => (
|
|
<BreadcrumbItem key={pathnameSplit[index]}>
|
|
{item}
|
|
</BreadcrumbItem>
|
|
))}
|
|
</BreadcrumbList>
|
|
</div>
|
|
<div className="pt-2">
|
|
<FormLayoutIcon width={50} height={50} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|