File size: 5,245 Bytes
e6f1924 250ae22 e6f1924 250ae22 e6f1924 250ae22 e6f1924 daca862 e6f1924 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 | "use client";
import { ChevronRight, Home } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { useEffect, useState } from "react";
// ============================================================================
// BREADCRUMB COMPONENTS
// ============================================================================
interface BreadcrumbItem {
label: string;
href: string;
}
const routeNameMap: Record<string, string> = {
'dashboard': 'Dashboard',
'candidate-explorer': 'Candidate Explorer',
'recruitment': 'Recruitment',
'upload': 'Upload',
'extract': 'Extract Profile',
'settings': 'Settings',
'profile': 'Profile',
'admin': 'Admin',
'users': 'Users',
'reports': 'Reports',
};
function Breadcrumb({ children }: { children: React.ReactNode }) {
return (
<nav aria-label="breadcrumb" className="flex items-center space-x-2">
{children}
</nav>
);
}
function BreadcrumbList({ children }: { children: React.ReactNode }) {
return (
<ol className="flex items-center space-x-2 text-sm">
{children}
</ol>
);
}
function BreadcrumbItem({ children }: { children: React.ReactNode }) {
return (
<li className="flex items-center">
{children}
</li>
);
}
function BreadcrumbLink({ href, children }: { href?: string; children: React.ReactNode }) {
if (!href) {
return (
<span className="text-gray-500 hover:text-gray-700 transition-colors">
{children}
</span>
);
}
return (
<Link
href={href}
className="text-gray-500 hover:text-gray-700 transition-colors hover:underline"
>
{children}
</Link>
);
}
function BreadcrumbHome({ href = '/' }: { href?: string }) {
return (
<BreadcrumbItem>
<Link
href={href}
className="text-gray-500 hover:text-gray-700 transition-colors"
aria-label="Home"
>
<Home className="w-4 h-4" />
</Link>
</BreadcrumbItem>
);
}
function BreadcrumbSeparator() {
return (
<li aria-hidden="true" className="text-gray-400">
<ChevronRight className="w-4 h-4" />
</li>
);
}
function BreadcrumbPage({ children }: { children: React.ReactNode }) {
return (
<span className="text-gray-900 font-medium">
{children}
</span>
);
}
function DynamicBreadcrumb() {
const pathname = usePathname();
const generateBreadcrumbs = (): BreadcrumbItem[] => {
const segments = pathname.split('/').filter(segment => segment !== '');
if (segments.length === 0) {
return [];
}
const breadcrumbs: BreadcrumbItem[] = [];
let currentPath = '';
segments.forEach((segment) => {
currentPath += `/${segment}`;
const label = routeNameMap[segment] || formatSegment(segment);
breadcrumbs.push({
label,
href: currentPath
});
});
return breadcrumbs;
};
const formatSegment = (segment: string): string => {
return segment
.split('-')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
};
const breadcrumbs = generateBreadcrumbs();
if (breadcrumbs.length === 0) {
return null;
}
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbHome />
{breadcrumbs.map((crumb, index) => {
const isLast = index === breadcrumbs.length - 1;
return (
<React.Fragment key={crumb.href}>
<BreadcrumbSeparator />
<BreadcrumbItem>
{isLast ? (
<BreadcrumbPage>{crumb.label}</BreadcrumbPage>
) : (
<BreadcrumbLink href={crumb.href}>
{crumb.label}
</BreadcrumbLink>
)}
</BreadcrumbItem>
</React.Fragment>
);
})}
</BreadcrumbList>
</Breadcrumb>
);
}
export function HeaderMenu() {
const [now, setNow] = useState<Date | null>(null)
useEffect(() => {
setNow(new Date()) // set on client only
const interval = setInterval(() => setNow(new Date()), 1000)
return () => clearInterval(interval)
}, [])
const dateStr = now?.toLocaleDateString("en-US", {
weekday: "long", day: "2-digit", month: "short",
year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit",
}) ?? ""
return (
<>
<header className="h-16 bg-white border-b border-gray-200 px-8 flex items-center justify-between">
{/* <Breadcrumb>
<BreadcrumbList>
<BreadcrumbHome />
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink>Dashboard</BreadcrumbLink>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb> */}
<DynamicBreadcrumb />
<div className="text-sm text-gray-500">{dateStr}</div>
</header>
<header className="h-16 bg-white border-b border-gray-200 px-8 flex items-center justify-between bg-[url(/dashboard/background.png)] bg-cover">
<h1 className="text-base font-bold text-foreground relative z-10">
Recruitment AI Dashboard – MT Intake
</h1>
</header>
</>
);
} |