129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
interface NavItem {
|
|
label: string;
|
|
href: string;
|
|
icon: string;
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{
|
|
label: 'Profile Settings',
|
|
href: '/agent/settings',
|
|
icon: '/assets/icons/settings-profile-icon.svg',
|
|
},
|
|
{
|
|
label: 'Password Security',
|
|
href: '/agent/settings/password',
|
|
icon: '/assets/icons/settings-lock-icon.svg',
|
|
},
|
|
{
|
|
label: 'Notifications',
|
|
href: '/agent/settings/notifications',
|
|
icon: '/assets/icons/settings-bell-icon.svg',
|
|
},
|
|
{
|
|
label: 'Privacy',
|
|
href: '/agent/settings/privacy',
|
|
icon: '/assets/icons/settings-privacy-icon.svg',
|
|
},
|
|
];
|
|
|
|
interface SettingsSidebarProps {
|
|
profileImage?: string;
|
|
name?: string;
|
|
title?: string;
|
|
}
|
|
|
|
export function SettingsSidebar({
|
|
profileImage = '/assets/icons/user-placeholder-icon.svg',
|
|
name = 'Brain Neeland',
|
|
title = 'Top Real Estate Agent',
|
|
}: SettingsSidebarProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="w-full lg:w-[300px] space-y-4">
|
|
{/* Profile Card */}
|
|
<div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0">
|
|
<Image
|
|
src={profileImage}
|
|
alt={name}
|
|
width={70}
|
|
height={70}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
|
|
{name}
|
|
</h3>
|
|
<p className="font-serif font-normal text-[13px] leading-[17px] text-[#00293D]/60 mt-1">
|
|
{title}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Categories Card */}
|
|
<div className="bg-white rounded-[15px] border border-[#00293D]/20 overflow-hidden">
|
|
{/* Categories Header */}
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-[#00293D]/10">
|
|
<h4 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
|
|
Categories
|
|
</h4>
|
|
<Image
|
|
src="/assets/icons/chevron-right-icon.svg"
|
|
alt="Expand"
|
|
width={8}
|
|
height={14}
|
|
/>
|
|
</div>
|
|
|
|
{/* Navigation Items */}
|
|
<nav className="py-2">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex items-center gap-4 py-3 px-5 transition-colors cursor-pointer ${
|
|
isActive
|
|
? 'bg-[#e58625]'
|
|
: 'hover:bg-[#00293d]/5'
|
|
}`}
|
|
>
|
|
<div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
|
|
<Image
|
|
src={item.icon}
|
|
alt={item.label}
|
|
width={20}
|
|
height={20}
|
|
style={isActive ? { filter: 'brightness(0) invert(1)' } : { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' }}
|
|
/>
|
|
</div>
|
|
<span
|
|
className={`font-serif text-[14px] leading-[19px] ${
|
|
isActive
|
|
? 'font-medium text-white'
|
|
: 'font-normal text-[#00293D]'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|