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

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

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 */}