Extract ProfileAvatarDisplay component from ProfileMenu

[Copilot]

Refactors ProfileMenu by extracting avatar display logic into a reusable ProfileAvatarDisplay component, following the talawa-admin pattern.

Changes

• New Component: ProfileAvatarDisplay.jsx

  • Renders circular avatar with user's first letter
  • Accepts firstLetter and onClick props
  • Uses static Tailwind classes for proper CSS purging

• Updated: ProfileMenu.jsx

  • Replaced inline avatar div with ProfileAvatarDisplay component
  • Maintains existing dropdown menu functionality

// Before
<div
  onClick={() => setOpen(!open)}
  className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold text-lg cursor-pointer"
>
  {firstLetter}
</div>

// After
<ProfileAvatarDisplay 
  firstLetter={firstLetter} 
  onClick={() => setOpen(!open)} 
/>

ProfileAvatarDisplay can now be reused in settings, user profiles, or other components requiring avatar display.

Original prompt

Phase 2.3: Refactor User Portal Settings Components with ProfileAvatarDisplay #5157

see issue in talawa-admin

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}