cetirizine

An experimental matrix client written in reactjs utilizing tailwind and storybook
git clone git://archive.git.mtrnord.blog/MTRNord/cetirizine.git
Log | Files | Refs | README | LICENSE

avatar.tsx (1330B)

      1 import { FC, memo } from "react";
      2 import { OnlineState } from "../../app/sdk/api/otherEnums";
      3 import './avatar.scss';
      4 
      5 type AvatarProps = {
      6     /**
      7      * The URL of the Avatar image
      8      */
      9     avatarUrl?: string
     10     /**
     11      * The displayname of the avatar user
     12      */
     13     displayname: string
     14     /**
     15      * Wether it is a DM or not
     16      */
     17     dm: boolean
     18     /**
     19      * Wether the user is online. Only used if dm is true.
     20      */
     21     online: OnlineState
     22     /**
     23      * Wether the user is a bot
     24      * @default false
     25      */
     26     isBot: boolean
     27     size?: string
     28 };
     29 
     30 const Avatar: FC<AvatarProps> = memo(({ avatarUrl, displayname, dm = false, online = OnlineState.Unknown, size = "2rem" }: AvatarProps) => {
     31 
     32     return (
     33         <div style={{ minWidth: size, minHeight: size, width: size, height: size }} className="avatar">
     34             <img alt={displayname} src={avatarUrl} />
     35             {
     36                 dm ?
     37                     (
     38                         online === OnlineState.Online ?
     39                             <div className="online"></div> :
     40                             (online === OnlineState.Offline ? <div className="offline"></div> :
     41                                 <div className="unknown"></div>)
     42                     ) :
     43                     <></>
     44             }
     45         </div>
     46     );
     47 })
     48 
     49 export default Avatar;