weseek__growi/apps/app/src/components/User/UserInfo.tsx

import React from 'react';

import type { IUserHasId } from '@growi/core';
import { UserPicture } from '@growi/ui/dist/components';

import styles from './UserInfo.module.scss';


export type UserInfoProps = {
  author?: IUserHasId,
}

export const UserInfo = (props: UserInfoProps): JSX.Element => {

  const { author } = props;

  if (author == null || author.status === 4) {
    return <></>;
  }

  return (
    <div className={`${styles['grw-users-info']} grw-users-info d-flex align-items-center d-edit-none mb-5 pb-3 border-bottom`} data-testid="grw-users-info">
      <UserPicture user={author} />
      <div className="users-meta">
        <h1 className="user-page-name">
          {author.name}
        </h1>
        <div className="user-page-meta mt-3 mb-0">
          <span className="user-page-username me-4">
            {/* TODO:Replace with Material Symbols Outlined */}
            <span className="user-page-username me-4"><i className="icon-user me-1"></i>{author.username}</span>
          </span>
          <span className="user-page-email me-2">
            <span className="material-symbols-outlined me-1">mail</span>
            { author.isEmailPublished
              ? author.email
              : '*****'
            }
          </span>
          { author.introduction && (
            <span className="user-page-introduction">{author.introduction}</span>
          ) }
        </div>
      </div>
    </div>
  );

};