515 lines
21 KiB
TypeScript
515 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useSession } from "next-auth/react";
|
|
import { useHeaderData } from "@/components/providers/header-provider";
|
|
|
|
const navLinks = [
|
|
{ label: "Professional", href: "/user/profiles" },
|
|
{ label: "Education", href: "/education" },
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "FAQ's", href: "/faq" },
|
|
];
|
|
|
|
export function CommonHeader() {
|
|
const { data: session, status } = useSession();
|
|
const {
|
|
profileImage,
|
|
profileName,
|
|
avatarLoaded,
|
|
setAvatarLoaded,
|
|
notificationCount,
|
|
messageCount,
|
|
} = useHeaderData();
|
|
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
|
const [showGuestMenu, setShowGuestMenu] = useState(false);
|
|
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
|
const [avatarError, setAvatarError] = useState(false);
|
|
const profileMenuRef = useRef<HTMLDivElement>(null);
|
|
const guestMenuRef = useRef<HTMLDivElement>(null);
|
|
const mobileMenuRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Close dropdowns when clicking outside
|
|
useEffect(() => {
|
|
function handleClickOutside(event: MouseEvent) {
|
|
if (
|
|
profileMenuRef.current &&
|
|
!profileMenuRef.current.contains(event.target as Node)
|
|
) {
|
|
setShowProfileMenu(false);
|
|
}
|
|
if (
|
|
guestMenuRef.current &&
|
|
!guestMenuRef.current.contains(event.target as Node)
|
|
) {
|
|
setShowGuestMenu(false);
|
|
}
|
|
if (
|
|
mobileMenuRef.current &&
|
|
!mobileMenuRef.current.contains(event.target as Node)
|
|
) {
|
|
setShowMobileMenu(false);
|
|
}
|
|
}
|
|
|
|
if (showProfileMenu || showGuestMenu || showMobileMenu) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
}
|
|
// const showProfessional = userRole === "AGENT" || userRole === "LENDER";
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, [showProfileMenu, showGuestMenu, showMobileMenu]);
|
|
|
|
// Use fetched profile name, fallback to session name
|
|
const userName = profileName || session?.user?.name;
|
|
const userEmail = session?.user?.email;
|
|
const userRole = (session?.user as any)?.role;
|
|
// const showProfessional = userRole === "AGENT" || userRole === "LENDER";
|
|
// Use fetched profile image, fallback to session image
|
|
const userImage = profileImage || session?.user?.image;
|
|
|
|
// Logo destination — always lands on the user dashboard regardless of role.
|
|
// const dashboardLink = "/user/dashboard";
|
|
const dashboardLink = "/home";
|
|
|
|
return (
|
|
<header
|
|
className="bg-[#648188] rounded-[20px] px-4 md:px-8 relative"
|
|
ref={mobileMenuRef}
|
|
>
|
|
<div className="flex justify-between items-center h-[60px] md:h-[70px]">
|
|
{/* Logo */}
|
|
<Link href={dashboardLink} className="flex-shrink-0 pt-[5px]">
|
|
<Image
|
|
src="/assets/logo.svg"
|
|
alt="RE-QuestN"
|
|
width={150}
|
|
height={40}
|
|
priority
|
|
className="h-8 md:h-10 w-auto"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Navigation - Desktop only */}
|
|
<nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="font-fractul font-bold text-[14px] leading-[18px] text-[#00293D] hover:text-[#e58625] transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
{/* <nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
|
|
{showProfessional && (
|
|
<Link
|
|
href="/user/profiles"
|
|
className="font-fractul font-bold text-[14px] leading-[18px] text-[#00293D] hover:text-[#e58625] transition-colors"
|
|
>
|
|
Professional
|
|
</Link>
|
|
)}
|
|
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="font-fractul font-bold text-[14px] leading-[18px] text-[#00293D] hover:text-[#e58625] transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav> */}
|
|
|
|
{/* Right Side Icons */}
|
|
<div className="flex items-center gap-2 md:gap-4">
|
|
{status === "loading" ? (
|
|
<div className="w-[35px] h-[35px] rounded-full shimmer-loading" />
|
|
) : session ? (
|
|
<>
|
|
{/* Message Icon - User role only */}
|
|
{userRole === "USER" && (
|
|
<Link
|
|
href="/user/message"
|
|
className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer"
|
|
>
|
|
<Image
|
|
src="/assets/icons/message-orange-icon.svg"
|
|
alt="Messages"
|
|
width={20}
|
|
height={18}
|
|
/>
|
|
{messageCount > 0 && (
|
|
<span className="absolute -top-1.5 -right-2 min-w-[18px] h-[18px] bg-red-500 rounded-full flex items-center justify-center px-1">
|
|
<span className="text-white text-[10px] font-bold leading-none">
|
|
{messageCount > 99 ? "99+" : messageCount}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)}
|
|
|
|
{/* Notification Bell */}
|
|
<Link
|
|
href={
|
|
userRole === "AGENT"
|
|
? "/agent/notifications"
|
|
: "/user/notifications"
|
|
}
|
|
className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer"
|
|
>
|
|
<Image
|
|
src="/assets/notification-icon.svg"
|
|
alt="Notifications"
|
|
width={20}
|
|
height={22}
|
|
/>
|
|
{notificationCount > 0 && (
|
|
<span className="absolute -top-1.5 -right-2 min-w-[18px] h-[18px] bg-red-500 rounded-full flex items-center justify-center px-1">
|
|
<span className="text-white text-[10px] font-bold leading-none">
|
|
{notificationCount > 99 ? "99+" : notificationCount}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</Link>
|
|
|
|
{/* Profile Section */}
|
|
<div className="relative" ref={profileMenuRef}>
|
|
<button
|
|
onClick={() => setShowProfileMenu(!showProfileMenu)}
|
|
className="flex items-center gap-2 md:gap-3 hover:opacity-80 transition-opacity cursor-pointer"
|
|
>
|
|
{/* Avatar */}
|
|
<div className="w-[32px] h-[32px] md:w-[35px] md:h-[35px] rounded-full overflow-hidden border-2 border-[#e58625] bg-gray-100 flex-shrink-0 relative">
|
|
{/* Shimmer while loading, initials only on error */}
|
|
{avatarError || !userImage ? (
|
|
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
|
|
<span className="font-bold text-[#00293d] text-[14px]">
|
|
{userName?.[0]?.toUpperCase() || "?"}
|
|
</span>
|
|
</div>
|
|
) : !avatarLoaded ? (
|
|
<div className="absolute inset-0 rounded-full shimmer-loading" />
|
|
) : null}
|
|
{userImage && !avatarError && (
|
|
<img
|
|
ref={(el) => {
|
|
if (el?.complete && el.naturalWidth > 0)
|
|
setAvatarLoaded(true);
|
|
}}
|
|
src={userImage}
|
|
alt="Profile"
|
|
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? "opacity-100" : "opacity-0"}`}
|
|
onLoad={() => setAvatarLoaded(true)}
|
|
onError={() => setAvatarError(true)}
|
|
/>
|
|
)}
|
|
</div>
|
|
{/* Greeting Text - hidden on mobile */}
|
|
<div className="hidden sm:flex flex-col text-left">
|
|
<span className="font-bold text-[14px] text-[#e58625] leading-tight">
|
|
Hi {userName?.split(" ")[0] || "User"} !
|
|
</span>
|
|
<span className="font-bold text-[9px] text-[#00293d] leading-tight">
|
|
Welcome back !
|
|
</span>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Profile Dropdown Menu */}
|
|
{showProfileMenu && (
|
|
<div className="absolute right-0 top-full mt-3 w-[271px] bg-white rounded-[15px] border border-black/20 z-50 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
|
|
<div className="absolute -top-2 right-6 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-white"></div>
|
|
|
|
<div className="flex items-center gap-3 px-4 py-4 border-b border-black/10">
|
|
<div className="w-[42px] h-[42px] rounded-full overflow-hidden flex-shrink-0 bg-gray-100 relative">
|
|
{/* Initials base layer */}
|
|
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
|
|
<span className="font-bold text-[#00293d] text-[17px]">
|
|
{userName?.[0]?.toUpperCase() || "?"}
|
|
</span>
|
|
</div>
|
|
{userImage && !avatarError && (
|
|
<img
|
|
ref={(el) => {
|
|
if (el?.complete && el.naturalWidth > 0)
|
|
setAvatarLoaded(true);
|
|
}}
|
|
src={userImage}
|
|
alt="Profile"
|
|
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? "opacity-100" : "opacity-0"}`}
|
|
onLoad={() => setAvatarLoaded(true)}
|
|
onError={() => setAvatarError(true)}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col min-w-0 overflow-hidden">
|
|
<p className="font-fractul font-medium text-[16px] leading-[20px] text-black">
|
|
{userName?.split(" ")[0] || "User"}
|
|
</p>
|
|
<p className="font-serif text-[14px] leading-[18px] text-black/50 truncate">
|
|
{userEmail}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Link
|
|
href={
|
|
userRole === "AGENT"
|
|
? "/agent/settings"
|
|
: "/user/settings"
|
|
}
|
|
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
|
|
onClick={() => setShowProfileMenu(false)}
|
|
>
|
|
<Image
|
|
src="/assets/icons/settings-icon.svg"
|
|
alt="Settings"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="font-fractul text-[16px] leading-[18px] text-black">
|
|
Account Settings
|
|
</p>
|
|
<p className="font-serif text-[14px] leading-[18px] text-black/50">
|
|
Profile, Security
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href={
|
|
userRole === "AGENT"
|
|
? "/agent/settings/notifications"
|
|
: "/user/settings/notifications"
|
|
}
|
|
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
|
|
onClick={() => setShowProfileMenu(false)}
|
|
>
|
|
<Image
|
|
src="/assets/icons/notification-settings-icon.svg"
|
|
alt="Notifications"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
<p className="font-fractul text-[16px] leading-[18px] text-black">
|
|
Notification Settings
|
|
</p>
|
|
</Link>
|
|
|
|
{userRole === "AGENT" && (
|
|
<Link
|
|
href="/agent/dashboard"
|
|
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
|
|
onClick={() => setShowProfileMenu(false)}
|
|
>
|
|
<Image
|
|
src="/assets/icons/edit-icon.svg"
|
|
alt="Edit Page"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
<p className="font-fractul text-[16px] leading-[18px] text-black">
|
|
Edit Page
|
|
</p>
|
|
</Link>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => {
|
|
setShowProfileMenu(false);
|
|
window.location.href = "/logout";
|
|
}}
|
|
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-black/5 transition-colors"
|
|
>
|
|
<Image
|
|
src="/assets/icons/logout-icon.svg"
|
|
alt="Log Out"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
<p className="font-fractul font-bold text-[16px] leading-[18px] text-[#e58625]">
|
|
Log Out
|
|
</p>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="relative" ref={guestMenuRef}>
|
|
<button
|
|
onClick={() => setShowGuestMenu(!showGuestMenu)}
|
|
className="flex items-center gap-2 md:gap-3 hover:opacity-80 transition-opacity cursor-pointer"
|
|
>
|
|
<Image
|
|
src="/assets/icons/signin-user-icon.svg"
|
|
alt="Sign in"
|
|
width={20}
|
|
height={22}
|
|
/>
|
|
<div className="hidden sm:flex flex-col text-left">
|
|
<span className="font-fractul font-bold text-[14px] text-[#e58625] leading-tight">
|
|
Sign in
|
|
</span>
|
|
<span className="font-fractul font-bold text-[10px] text-[#00293d] leading-tight">
|
|
Sign in to Connect
|
|
</span>
|
|
</div>
|
|
</button>
|
|
|
|
{showGuestMenu && (
|
|
<div className="absolute right-0 top-full mt-3 w-[271px] bg-white rounded-[15px] border border-black/20 z-50 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
|
|
<div className="absolute -top-2 right-6 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-white"></div>
|
|
|
|
<div className="flex flex-col items-center pt-6 pb-4 border-b border-black/10">
|
|
<Image
|
|
src="/assets/icons/signin-user-icon.svg"
|
|
alt="User"
|
|
width={36}
|
|
height={40}
|
|
/>
|
|
<p className="font-serif text-[14px] text-black/50 mt-3">
|
|
Sign in or create account to continue
|
|
</p>
|
|
</div>
|
|
|
|
<Link
|
|
href="/login"
|
|
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
|
|
onClick={() => setShowGuestMenu(false)}
|
|
>
|
|
<Image
|
|
src="/assets/icons/settings-icon.svg"
|
|
alt="Settings"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="font-fractul text-[16px] leading-[18px] text-black">
|
|
Account Settings
|
|
</p>
|
|
<p className="font-serif text-[14px] leading-[18px] text-black/50">
|
|
Profile, Security
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/login"
|
|
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
|
|
onClick={() => setShowGuestMenu(false)}
|
|
>
|
|
<Image
|
|
src="/assets/icons/notification-settings-icon.svg"
|
|
alt="Notifications"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
<p className="font-fractul text-[16px] leading-[18px] text-black">
|
|
Notification Settings
|
|
</p>
|
|
</Link>
|
|
|
|
<div className="flex gap-3 px-4 py-4">
|
|
<Link
|
|
href="/signup"
|
|
onClick={() => setShowGuestMenu(false)}
|
|
className="flex-1 h-[37px] bg-[#e58625] rounded-[15px] flex items-center justify-center font-fractul text-[14px] text-white hover:bg-[#d47920] transition-colors"
|
|
>
|
|
Sign up
|
|
</Link>
|
|
<Link
|
|
href="/login"
|
|
onClick={() => setShowGuestMenu(false)}
|
|
className="flex-1 h-[37px] border border-[#e58625] rounded-[15px] flex items-center justify-center font-fractul text-[14px] text-[#e58625] hover:bg-[#e58625]/5 transition-colors"
|
|
>
|
|
Login
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="md:hidden p-1 hover:opacity-80 transition-opacity"
|
|
onClick={() => setShowMobileMenu(!showMobileMenu)}
|
|
>
|
|
<svg
|
|
className="w-6 h-6 text-[#00293d]"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
{showMobileMenu ? (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
) : (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation Menu */}
|
|
{showMobileMenu && (
|
|
<div className="md:hidden border-t border-white/20 py-3 pb-4">
|
|
<nav className="flex flex-col gap-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setShowMobileMenu(false)}
|
|
className="font-fractul font-bold text-[14px] text-[#00293D] hover:text-[#e58625] transition-colors px-2 py-2 rounded-[10px] hover:bg-white/10"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
{/* <nav className="flex flex-col gap-1">
|
|
{showProfessional && (
|
|
<Link
|
|
href="/user/profiles"
|
|
onClick={() => setShowMobileMenu(false)}
|
|
className="font-fractul font-bold text-[14px] text-[#00293D] hover:text-[#e58625] transition-colors px-2 py-2 rounded-[10px] hover:bg-white/10"
|
|
>
|
|
Professional
|
|
</Link>
|
|
)}
|
|
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setShowMobileMenu(false)}
|
|
className="font-fractul font-bold text-[14px] text-[#00293D] hover:text-[#e58625] transition-colors px-2 py-2 rounded-[10px] hover:bg-white/10"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav> */}
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|