56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { Button } from "@nextui-org/button";
|
||
|
|
import { BreadcrumbItem, Breadcrumbs } from "@nextui-org/react";
|
||
|
|
import { usePathname, useRouter } from "next/navigation";
|
||
|
|
import { Image } from "@nextui-org/react";
|
||
|
|
import { FormLayoutIcon } from "../icons";
|
||
|
|
|
||
|
|
export const Breadcrumb = () => {
|
||
|
|
const [currentPage, setCurrentPage] = useState<React.Key>("");
|
||
|
|
const router = useRouter();
|
||
|
|
const pathname = usePathname();
|
||
|
|
const pathnameSplit = pathname.split("/");
|
||
|
|
pathnameSplit.shift();
|
||
|
|
let pathnameTransformed = pathnameSplit.map(item => {
|
||
|
|
let words = item.split('-');
|
||
|
|
let 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])
|
||
|
|
|
||
|
|
const handleAction = (key: any) => {
|
||
|
|
const keyIndex = pathnameSplit.indexOf(key);
|
||
|
|
const combinedPath = pathnameSplit.slice(0, keyIndex + 1).join('/');
|
||
|
|
router.push("/" + combinedPath);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-[100px] gap-0 grid rounded-lg border-small ml-4">
|
||
|
|
<div className="px-6">
|
||
|
|
<div className="flex flex-row justify-between items-center">
|
||
|
|
<div className="pt-1">
|
||
|
|
<p className="text-2xl font-semibold mb-2">{pathnameTransformed[pathnameTransformed.length - 1]}</p>
|
||
|
|
<Breadcrumbs underline="active" onAction={(key) => handleAction(key)}>
|
||
|
|
{pathnameTransformed?.map((item, index) => (
|
||
|
|
<BreadcrumbItem key={pathnameSplit[index]} isCurrent={pathnameSplit[index] === currentPage}>
|
||
|
|
{item}
|
||
|
|
</BreadcrumbItem>
|
||
|
|
))}
|
||
|
|
</Breadcrumbs>
|
||
|
|
</div>
|
||
|
|
<div className="pt-2">
|
||
|
|
<FormLayoutIcon width={50} height={50} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div >
|
||
|
|
);
|
||
|
|
};
|