feat: Implement a common header component to replace AgentHeader and introduce a new contact page with associated assets.
This commit is contained in:
pradeepkumar
156
src/components/layout/CommonHeader.tsx
Normal file
156
src/components/layout/CommonHeader.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useSession, signOut } from 'next-auth/react';
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Education', href: '/education' },
|
||||
{ label: 'About Us', href: '/about' },
|
||||
{ label: "FAQ's", href: '/faq' },
|
||||
];
|
||||
|
||||
export function CommonHeader() {
|
||||
const { data: session } = useSession();
|
||||
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
||||
|
||||
const userName = session?.user?.name;
|
||||
const userEmail = session?.user?.email;
|
||||
const userRole = (session?.user as any)?.role;
|
||||
|
||||
// Determine dashboard link based on user role
|
||||
const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/userprofile';
|
||||
|
||||
return (
|
||||
<header className="bg-[#648188] rounded-[20px] px-8">
|
||||
<div className="flex justify-between items-center h-[70px]">
|
||||
{/* Logo */}
|
||||
<Link href="/">
|
||||
<Image
|
||||
src="/assets/logo.svg"
|
||||
alt="RE-QuestN"
|
||||
width={150}
|
||||
height={40}
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Navigation */}
|
||||
<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-[20px] leading-[24px] text-[#00293D] hover:text-[#e58625] transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Right Side Icons */}
|
||||
<div className="flex items-center gap-4">
|
||||
{session ? (
|
||||
<>
|
||||
{/* Notification Bell */}
|
||||
<button className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity">
|
||||
<Image
|
||||
src="/assets/notification-icon.svg"
|
||||
alt="Notifications"
|
||||
width={20}
|
||||
height={22}
|
||||
/>
|
||||
{/* Notification Dot */}
|
||||
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
|
||||
{/* Profile Icon with Dropdown */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowProfileMenu(!showProfileMenu)}
|
||||
className="w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<Image
|
||||
src="/assets/profile-icon.svg"
|
||||
alt="Profile"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Profile Dropdown Menu */}
|
||||
{showProfileMenu && (
|
||||
<div className="absolute right-0 mt-2 w-56 bg-white rounded-[15px] border border-[#00293d]/10 py-3 z-50">
|
||||
<div className="px-4 py-2 border-b border-[#00293d]/10">
|
||||
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
|
||||
{userName || 'User'}
|
||||
</p>
|
||||
<p className="font-serif text-[12px] leading-[16px] text-[#00293D]/50">{userEmail}</p>
|
||||
</div>
|
||||
<div className="py-2">
|
||||
<Link
|
||||
href={dashboardLink}
|
||||
className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
|
||||
onClick={() => setShowProfileMenu(false)}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link
|
||||
href={userRole === 'AGENT' ? '/agent/settings' : '/user/settings'}
|
||||
className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
|
||||
onClick={() => setShowProfileMenu(false)}
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</div>
|
||||
<div className="border-t border-[#00293d]/10 pt-2">
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: '/login' })}
|
||||
className="w-full text-left px-4 py-2 font-serif text-[14px] leading-[19px] text-[#e58625] hover:bg-[#00293d]/5 transition-colors"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/login"
|
||||
className="font-fractul font-bold text-[14px] text-[#00293D] hover:text-[#e58625] transition-colors"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
href="/signup"
|
||||
className="bg-[#e58625] text-[#00293D] px-4 py-2 rounded-[15px] font-fractul font-bold text-[14px] hover:bg-[#d47720] transition-colors"
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button className="md:hidden p-2 hover:opacity-80 transition-opacity">
|
||||
<svg
|
||||
className="w-6 h-6 text-[#00293d]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user