feat: add breadcrumb

components/shared/Breadcrumb.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight, Home, FileText } from "lucide-react";
+
+const truncateText = (text: string, maxLength: number) => {
+	return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
+};
+
+export default function Breadcrumb() {
+	const pathname = usePathname();
+	const pathSegments = pathname.split("/").filter((segment) => segment !== "");
+
+	return (
+		<nav aria-label="Breadcrumb" className="hidden lg:block ml-4">
+			<ol className="flex items-center space-x-2 text-sm text-gray-500">
+				<li>
+					<Link
+						href="/"
+						className="flex items-center hover:text-gray-700 dark:hover:text-gray-300"
+					>
+						<Home className="w-4 h-4 mr-1" />
+						Home
+					</Link>
+				</li>
+				{pathSegments.map((segment, index) => {
+					const href = `/${pathSegments.slice(0, index + 1).join("/")}`;
+					const isLast = index === pathSegments.length - 1;
+					const truncatedSegment = truncateText(segment, 20);
+
+					return (
+						<li key={href} className="flex items-center">
+							<ChevronRight className="w-4 h-4 mx-1" />
+							{isLast ? (
+								<span className="flex items-center font-medium text-gray-900 dark:text-gray-100">
+									<FileText className="w-4 h-4 mr-1" />
+									{truncatedSegment.charAt(0).toUpperCase() +
+										truncatedSegment.slice(1)}
+								</span>
+							) : (
+								<Link
+									href={href}
+									className="flex items-center hover:text-gray-700 dark:hover:text-gray-300"
+								>
+									<FileText className="w-4 h-4 mr-1" />
+									{truncatedSegment.charAt(0).toUpperCase() +
+										truncatedSegment.slice(1)}
+								</Link>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+		</nav>
+	);
+}

components/shared/Navbar.tsx

@@ -15,18 +15,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useContext } from "react";
 import { MainContext } from "@/contexts/MainContext";
-import { Notification, SearchBar } from ".";
+import { Notification, Breadcrumb } from ".";
 
 export default function Navbar() {
 	const { handleLang, lang, openSidebar } = useContext(MainContext);
 
 	return (
-		<nav className="sticky z-20 flex top-0 w-full bg-opacity-30 dark:bg-opacity-40 backdrop-filter backdrop-blur-sm items-center justify-between lg:pl-1 pl-4 py-3 sm:py-1 lg:pr-5 pr-4 bg-white dark:bg-slate-950 shadow dark:shadow-slate-900">
+		<nav className="sticky z-20 h-16 flex top-0 w-full bg-opacity-30 dark:bg-opacity-40 backdrop-filter backdrop-blur-sm items-center justify-between lg:pl-1 pl-4 py-3 sm:py-1 lg:pr-5 pr-4 bg-white dark:bg-slate-950 shadow dark:shadow-slate-900">
 			<div className="flex gap-2 items-center">
 				<span className="cursor-pointer lg:hidden inline-flex" onClick={openSidebar}>
 					<AlignLeft />
 				</span>
-				<SearchBar routeType="" />
+				<Breadcrumb />
 			</div>
 			<div className="flex gap-4 md:gap-5">
 				<DropdownMenu>

components/shared/index.ts

@@ -83,7 +83,7 @@ import SelectPredictionDate from "./SelectPredictionDate";
 import GalleryImage from "./GalleryImage";
 import SelectVolunteers from "./SelectVolunteers";
 import AssignedVolunteers from "./AssignedVolunteers";
-
+import Breadcrumb from "./Breadcrumb";
 export {
 	Navbar,
 	Sidebar,
@@ -170,4 +170,5 @@ export {
 	GalleryImage,
 	SelectVolunteers,
 	AssignedVolunteers,
+	Breadcrumb,
 };