User Interface
people-details
Person Details

Person details

Use this component to display the details of a person with some secondary text like email, position title etc.

For more documentation, screenshot and usage see `app\src\components\People\PersonDetails\index.md

Example usage

Basic usage

import PersonDetails from "@/components/People/PersonDetails";
 
<PersonDetails
  showLoadingSkeleton={loadingTaskDetails}
  photoUrl={creator?.photoUrl}
  wrapperClassName="px-3 py-2"
  displayName={creator?.displayName}
  secondaryText={`Created ${moment(taskDetails?.createdDate).fromNow()}`}
/>;

With custom content

import PersonDetails from "@/components/People/PersonDetails";
 
<PersonDetails
  displayName={record?.fullName}
  displayNameWrapperClass="text-clickable"
  photoUrl={record?.photoUrl}
  secondaryText={record?.email}
  extraContent={
    <div className="text-xs">
      Added {moment(record.createdAt).locale("en").fromNow()}
    </div>
  }
/>;

Inside a popover

<Popover
  trigger={["hover", "click"]}
  overlayClassName="app-popup"
  content={
    <PersonDetails
      wrapperClassName="px-3 py-2"
      displayName={leadAssignee?.displayName}
      displayNameWrapperClass="text-clickable"
      photoUrl={leadAssignee?.photoUrl}
      secondaryText={leadAssignee?.email}
    />
  }
>
  <Avatar src={leadAssignee?.photoUrl} className="bg-primary">
    {getInitials(leadAssignee?.displayName)}
  </Avatar>
</Popover>

For a disabled/deactivated user

import PersonDetails from "@/components/People/PersonDetails";
 
<PersonDetails
  isDisabled={isDisabled}
  photoUrl={creator?.photoUrl}
  wrapperClassName="px-3 py-2"
  displayName={creator?.displayName}
  secondaryText={`Created ${moment(taskDetails?.createdDate).fromNow()}`}
/>;

For showing John Doe (You) for self indicator

import PersonDetails from "@/components/People/PersonDetails";
 
<PersonDetails
  isSelf={isSelf}
  isDisabled={isDisabled}
  photoUrl={creator?.photoUrl}
  wrapperClassName="px-3 py-2"
  displayName={creator?.displayName}
  secondaryText={`Created ${moment(taskDetails?.createdDate).fromNow()}`}
/>;
IndexUsing Toggles