mentors-user-card.component.json

{
  "classes": {
    "listItem": "py-3 sm:py-4 w-100",
    "container": "flex items-center space-x-4 cursor-pointer",
    "wrapper": "min-w-0 flex-1",
    "userName": "truncate text-sm font-medium text-gray-900",
    "iconContainer": "inline-flex items-center text-base font-semibold text-gray-900"
  }
}

mentors-user-card.component.tsx

  return (
    <li className={classes.listItem}>
      <div className={classes.container}>
        <div className={classes.wrapper}>
          <p
            className={classes.userName}>
            {waitingForName ? <Spinner /> : data.userName}
          </p>
        </div>
        <div
          onClick={() => request({
            ...mentorsGroup,
            mentorsId,
          })}
          className={classes.iconContainer}
        >
          <Icon.Close />
        </div>
      </div>
    </li>
  );