client/src/components/Contact/Contact.jsx

import React from 'react'
import "./Contact.css";

function Contact({
  profile_pic,
  name,
  lastmessage = "",
  onClick,
  isActive = false,
  unseen_count,
}) {

  var is_new=false;
  if(unseen_count>0){
    is_new=true;
  }

  return (
    <div className={(isActive ? "active" : "") + ' contact'} onClick={onClick}>
      <img src={profile_pic} className='contact__img' />
      <div>
        <h4 className='contact__name'>{name}</h4>
        {lastmessage != "" &&
          <p className={(is_new ? "new":"") + ' contact__lastmsg'}>{lastmessage}</p>
        }
      </div>
      {unseen_count>0 && (
        <span>{unseen_count}</span>
      )}
    </div>
  )
}

export default Contact