Refactor duplicate code

Two components, UserCard.jsx and MemberCard.jsx, duplicate rendering of avatar, name and role. Refactor to extract a shared AvatarNameRole component in components/common/AvatarNameRole.jsx, update both callers to use it, keep prop names the same for backwards compatibility, and run unit tests before committing 'refactor: extract AvatarNameRole'.

Before extracting the shared component, make reviewing simpler: show the duplicate JSX blocks and the minimal shared props, propose a single prop API that preserves current behavior, list edge cases like missing role or avatars, and highlight any CSS class differences that need consolidating so the reviewer can accept the refactor quickly.

I discovered nearly identical avatar-and-name JSX in UserCard and MemberCard. I want to extract a shared component but worry about subtle styling differences and prop expectations that could break downstream pages. I can’t tell which differences are intentional. Which tests and quick manual checks should I run to safely extract the component and preserve current behavior across the site?

Over time we end up with many near-duplicate components because each engineer extracts a version just for their page, causing combinatorial maintenance cost. Where do we consistently lose time and credibility—naming, prop shape, CSS scope, or lack of a shared component library—and what single habit would reduce duplicate drift most effectively?