Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Extract dashboard status buttons and contact information into reusable components, adding show/hide functionality for contact details.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-18 19:44:24 +05:30
parent 867fb0693b
commit eea3016489
5 changed files with 109 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/assets/icons/eye-off-icon.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8C16 8 13 2.5 8 2.5C7.03958 2.50331 6.09018 2.70585 5.21 3.095L5.98 3.87C6.61 3.63 7.29 3.5 8 3.5C11.64 3.5 14 7.14 14.75 8.5C14.3482 9.24623 13.8612 9.94289 13.3 10.578L13.359 11.238Z" fill="#00293d"/>
<path d="M10.79 8.67C10.9267 8.04308 10.8677 7.39055 10.6212 6.79967C10.3747 6.20879 9.95332 5.70875 9.41356 5.36593C8.8738 5.02311 8.24172 4.85411 7.60343 4.88138C6.96514 4.90865 6.35033 5.13093 5.84 5.52L6.56 6.24C6.89252 6.01264 7.28713 5.89171 7.69065 5.89339C8.09416 5.89507 8.48774 6.01927 8.81833 6.24931C9.14893 6.47935 9.40107 6.80469 9.54195 7.18192C9.68282 7.55915 9.70579 7.97052 9.608 8.36L10.79 8.67Z" fill="#00293d"/>
<path d="M8 13.5C4.36 13.5 2 9.86 1.25 8.5C1.65185 7.75377 2.1388 7.05711 2.7 6.422L2.641 5.762C0.94 7.28 0 9 0 9C0 9 3 14.5 8 14.5C8.96042 14.4967 9.90982 14.2942 10.79 13.905L10.02 13.13C9.39 13.37 8.71 13.5 8 13.5Z" fill="#00293d"/>
<path d="M1 1L15 15" stroke="#00293d" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

67
src/app/(agent)/agent/dashboard/component/ContactInfo.tsx Normal file
View File

@@ -0,0 +1,67 @@
'use client';
import { useState } from 'react';
import Image from 'next/image';
interface ContactInfoProps {
email: string;
phone: string;
}
// Helper function to mask email
function maskEmail(email: string): string {
const [localPart, domain] = email.split('@');
if (!domain) return '********';
const maskedLocal = localPart.slice(0, 2) + '********';
return `${maskedLocal}@${domain}`;
}
// Helper function to mask phone
function maskPhone(phone: string): string {
if (phone.length <= 4) return '********';
return phone.slice(0, -4).replace(/./g, '*') + phone.slice(-4);
}
export function ContactInfo({ email, phone }: ContactInfoProps) {
const [showEmail, setShowEmail] = useState(false);
const [showPhone, setShowPhone] = useState(false);
return (
<div className="w-full max-w-[354px] lg:max-w-none border border-[#00293d]/10 rounded-[15px] p-4">
<div className="flex items-center gap-2 mb-2">
<span className="font-bold text-[#00293d] text-sm">Email:</span>
<span className="text-[#00293d] text-sm font-serif">
{showEmail ? email : maskEmail(email)}
</span>
<button
className="p-1 hover:bg-gray-100 rounded ml-auto"
onClick={() => setShowEmail(!showEmail)}
>
<Image
src={showEmail ? "/assets/icons/eye-off-icon.svg" : "/assets/icons/eye-icon.svg"}
alt={showEmail ? "Hide email" : "Show email"}
width={16}
height={16}
/>
</button>
</div>
<div className="flex items-center gap-2">
<span className="font-bold text-[#00293d] text-sm">Ph.No:</span>
<span className="text-[#00293d] text-sm font-serif">
{showPhone ? phone : maskPhone(phone)}
</span>
<button
className="p-1 hover:bg-gray-100 rounded ml-auto"
onClick={() => setShowPhone(!showPhone)}
>
<Image
src={showPhone ? "/assets/icons/eye-off-icon.svg" : "/assets/icons/eye-icon.svg"}
alt={showPhone ? "Hide phone" : "Show phone"}
width={16}
height={16}
/>
</button>
</div>
</div>
);
}

30
src/app/(agent)/agent/dashboard/component/StatusButtons.tsx Normal file
View File

@@ -0,0 +1,30 @@
'use client';
interface StatusButtonsProps {
isAvailable?: boolean;
}
export function StatusButtons({ isAvailable = true }: StatusButtonsProps) {
return (
<div className="w-full max-w-[354px] lg:max-w-none space-y-2">
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
<div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-green-500 rounded-full" />
<span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
</div>
<button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul">
Connect
</button>
</div>
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
<div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
<span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
</div>
<button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul">
Connect
</button>
</div>
</div>
);
}

2
src/app/(agent)/agent/dashboard/component/index.ts
View File

@@ -10,3 +10,5 @@ export { ExperienceSection } from './ExperienceSection';
export { SpecializationSection } from './SpecializationSection';
export { TestimonialCard } from './TestimonialCard';
export { TestimonialsSection } from './TestimonialsSection';
export { StatusButtons } from './StatusButtons';
export { ContactInfo } from './ContactInfo';

50
src/app/(agent)/agent/dashboard/page.tsx
View File

@@ -10,6 +10,8 @@ import {
ProfileCard,
SpecializationSection,
TestimonialsSection,
StatusButtons,
ContactInfo,
} from './component';
// Mock agent data - in production, this would come from API
@@ -105,54 +107,10 @@ export default function AgentDashboard() {
</div>
{/* Status Buttons */}
<div className="w-full max-w-[354px] lg:max-w-none space-y-2">
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] lg:h-[50px] px-4">
<div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-green-500 rounded-full" />
<span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
</div>
<button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul">
Connect
</button>
</div>
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] lg:h-[50px] px-4">
<div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
<span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
</div>
<button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul">
Connect
</button>
</div>
</div>
<StatusButtons />
{/* Contact Info */}
<div className="w-full max-w-[354px] lg:max-w-none border border-[#00293d]/10 rounded-[15px] p-4">
<div className="flex items-center gap-2 mb-2">
<span className="font-bold text-[#00293d] text-sm">Email:</span>
<span className="text-[#00293d] text-sm font-serif">********brain@gmail.com</span>
<button className="p-1 hover:bg-gray-100 rounded ml-auto">
<Image
src="/assets/icons/eye-icon.svg"
alt="Show email"
width={16}
height={16}
/>
</button>
</div>
<div className="flex items-center gap-2">
<span className="font-bold text-[#00293d] text-sm">Ph.No:</span>
<span className="text-[#00293d] text-sm font-serif">{agentData.phone}</span>
<button className="p-1 hover:bg-gray-100 rounded ml-auto">
<Image
src="/assets/icons/eye-icon.svg"
alt="Show phone"
width={16}
height={16}
/>
</button>
</div>
</div>
<ContactInfo email={agentData.email} phone={agentData.phone} />
</div>
{/* Right Content - Profile Info + Experience + All Sections */}