109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import {
|
|
ArticleIcon,
|
|
DashboardIcon,
|
|
MagazineIcon,
|
|
MasterCategoryIcon,
|
|
MasterRoleIcon,
|
|
MasterUsersIcon,
|
|
StaticPageIcon,
|
|
} from "../icons/sidebar-icon";
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator,
|
|
} from "../ui/breadcrumb";
|
|
import React from "react";
|
|
|
|
export const Breadcrumbs = () => {
|
|
const [currentPage, setCurrentPage] = useState<React.Key>("");
|
|
const router = useRouter();
|
|
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]);
|
|
|
|
const handleAction = (key: any) => {
|
|
const keyIndex = pathnameSplit.indexOf(key);
|
|
const combinedPath = pathnameSplit.slice(0, keyIndex + 1).join("/");
|
|
router.push("/" + combinedPath);
|
|
};
|
|
|
|
return (
|
|
<div className="h-[100px] w-full">
|
|
<div className="px-4 md:px-8">
|
|
<div className="flex flex-row justify-between items-center py-3">
|
|
<div className="flex flex-row justify-between w-full">
|
|
<div>
|
|
<p className="text-2xl font-semibold mb-2">
|
|
{pathnameTransformed[pathnameTransformed.length - 1]}
|
|
</p>
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
{pathnameTransformed
|
|
?.filter((item) => item !== "Admin")
|
|
.map((item, index, array) => (
|
|
<React.Fragment key={pathnameSplit[index]}>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink
|
|
onClick={() => handleAction(pathnameSplit[index])}
|
|
className={
|
|
pathnameSplit[index] === currentPage
|
|
? "font-semibold"
|
|
: ""
|
|
}
|
|
>
|
|
{item}
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
{index < array.length - 1 && <BreadcrumbSeparator />}
|
|
</React.Fragment>
|
|
))}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <div className="lg:hidden">
|
|
{!isOpen && (
|
|
<button className="w-5 h-5 mb-3 text-zinc-400 dark:text-zinc-400 z-50 flex justify-center items-center" onClick={toggleSidebar}>
|
|
<BurgerButtonIcon />
|
|
</button>
|
|
)}
|
|
</div> */}
|
|
<div className="hidden lg:block">
|
|
{pathname.includes("dashboard") && <DashboardIcon size={50} />}
|
|
{pathname.includes("article") && <ArticleIcon size={50} />}
|
|
{pathname.includes("master-category") && (
|
|
<MasterCategoryIcon size={50} />
|
|
)}
|
|
{pathname.includes("magazine") && <MagazineIcon size={50} />}
|
|
{pathname.includes("static-page") && <StaticPageIcon size={50} />}
|
|
{pathname.includes("master-user") && <MasterUsersIcon size={50} />}
|
|
{pathname.includes("master-role") && <MasterRoleIcon size={50} />}
|
|
{/* <FormLayoutIcon width={50} height={50} /> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|