feat: Implement agent messaging and settings pages with new components and icons.

2026-01-18 23:58:25 +05:30
parent 48c4b564e5
commit c5ed8fb1aa
28 changed files with 1703 additions and 12 deletions
--- a/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx
+++ b/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx
@@ -0,0 +1,133 @@
+'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 Nooland',
+  title = 'Top Real Estate Agent',
+}: SettingsSidebarProps) {
+  const pathname = usePathname();
+
+  return (
+    <div className="w-full lg:w-[280px] bg-white rounded-[15px] border border-[#00293d]/10 overflow-hidden h-fit">
+      {/* Profile Section */}
+      <div className="p-6 flex flex-col items-center">
+        <div className="w-[80px] h-[80px] rounded-full overflow-hidden mb-3 border-2 border-[#e58625]">
+          <Image
+            src={profileImage}
+            alt={name}
+            width={80}
+            height={80}
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
+          {name}
+        </h3>
+        <p className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/70 mt-1">
+          {title}
+        </p>
+      </div>
+
+      {/* Divider */}
+      <div className="w-full h-[1px] bg-[#00293d]/10" />
+
+      {/* Categories Section */}
+      <div className="p-4">
+        {/* Categories Header */}
+        <div className="flex items-center justify-between mb-4 px-2">
+          <h4 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+            Categories
+          </h4>
+          <Image
+            src="/assets/icons/chevron-right-icon.svg"
+            alt="Expand"
+            width={8}
+            height={14}
+          />
+        </div>
+
+        {/* Navigation Items */}
+        <nav className="space-y-1">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-3 py-3 px-3 rounded-[10px] transition-colors cursor-pointer ${
+                  isActive
+                    ? 'bg-[#e58625]/10'
+                    : 'hover:bg-[#00293d]/5'
+                }`}
+              >
+                <div
+                  className={`w-5 h-5 flex items-center justify-center ${
+                    isActive ? 'text-[#e58625]' : 'text-[#00293D]'
+                  }`}
+                  style={{ color: isActive ? '#e58625' : '#00293D' }}
+                >
+                  <Image
+                    src={item.icon}
+                    alt={item.label}
+                    width={20}
+                    height={20}
+                    className={isActive ? 'brightness-0 saturate-100' : ''}
+                    style={isActive ? { 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-[#e58625]'
+                      : 'font-normal text-[#00293D]'
+                  }`}
+                >
+                  {item.label}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </div>
+  );
+}