1 import { showAvatars } from "@utils/app";
2 import { getStaticDir } from "@utils/env";
3 import { hostname, isCakeDay } from "@utils/helpers";
4 import classNames from "classnames";
5 import { Component } from "inferno";
6 import { Link } from "inferno-router";
7 import { Person } from "lemmy-js-client";
8 import { relTags } from "../../config";
9 import { PictrsImage } from "../common/pictrs-image";
10 import { CakeDay } from "./cake-day";
12 interface PersonListingProps {
15 useApubName?: boolean;
18 showApubName?: boolean;
21 export class PersonListing extends Component<PersonListingProps, any> {
22 constructor(props: any, context: any) {
23 super(props, context);
27 const person = this.props.person;
28 const local = person.local;
29 let apubName: string, link: string;
32 apubName = `@${person.name}`;
33 link = `/u/${person.name}`;
35 const domain = hostname(person.actor_id);
36 apubName = `@${person.name}@${domain}`;
37 link = !this.props.realLink
38 ? `/u/${person.name}@${domain}`
42 let displayName = this.props.useApubName
44 : person.display_name ?? apubName;
46 if (this.props.showApubName && !local && person.display_name) {
47 displayName = `${displayName} (${apubName})`;
52 {!this.props.realLink ? (
55 className={classNames(
56 "person-listing d-inline-flex align-items-baseline",
58 "text-muted": this.props.muted,
59 "text-info": !this.props.muted,
64 {this.avatarAndName(displayName)}
69 className={`person-listing d-inline-flex align-items-baseline ${
70 this.props.muted ? "text-muted" : "text-info"
75 {this.avatarAndName(displayName)}
79 {isCakeDay(person.published) && <CakeDay creatorName={apubName} />}
84 avatarAndName(displayName: string) {
85 const avatar = this.props.person.avatar;
88 {!this.props.hideAvatar &&
89 !this.props.person.banned &&
92 src={avatar ?? `${getStaticDir()}/assets/icons/icon-96x96.png`}
96 <span>{displayName}</span>