diff --git a/web/components/avatar.css b/web/components/avatar.css new file mode 100644 index 000000000..9940b55bf --- /dev/null +++ b/web/components/avatar.css @@ -0,0 +1,57 @@ +.emojiContainer { + display: flex; + align-items: center; + justify-content: center; +} + +.emojiMicro { + font-size: 9px; + height: 16px; + line-height: 16px; +} + +.emojiSmall { + font-size: 14px; + height: 24px; + line-height: 24px; +} + +.emojiLarge { + font-size: 28px; + height: 42px; + line-height: 42px; +} + +.emojiProfile { + font-size: 80px; + height: 112px; + line-height: 112px; +} + +.micro { + border-radius: 8px; + height: 16px; + width: 16px; + min-width: 16px; +} + +.small { + border-radius: 12px; + height: 24px; + width: 24px; + min-width: 24px; +} + +.large { + border-radius: 21px; + height: 42px; + width: 42px; + min-width: 42px; +} + +.profile { + border-radius: 56px; + height: 112px; + width: 112px; + min-width: 112px; +} diff --git a/web/components/avatar.react.js b/web/components/avatar.react.js new file mode 100644 index 000000000..4430cc395 --- /dev/null +++ b/web/components/avatar.react.js @@ -0,0 +1,67 @@ +// @flow + +import classnames from 'classnames'; +import * as React from 'react'; + +import type { ResolvedClientAvatar } from 'lib/types/avatar-types'; + +import css from './avatar.css'; + +type Props = { + +avatarInfo: ResolvedClientAvatar, + +size: 'micro' | 'small' | 'large' | 'profile', +}; + +function Avatar(props: Props): React.Node { + const { avatarInfo, size } = props; + + const containerSizeClassName = classnames({ + [css.micro]: size === 'micro', + [css.small]: size === 'small', + [css.large]: size === 'large', + [css.profile]: size === 'profile', + }); + + const emojiSizeClassName = classnames({ + [css.emojiContainer]: true, + [css.emojiMicro]: size === 'micro', + [css.emojiSmall]: size === 'small', + [css.emojiLarge]: size === 'large', + [css.emojiProfile]: size === 'profile', + }); + + const emojiContainerColorStyle = React.useMemo(() => { + if (avatarInfo.type === 'emoji') { + return { backgroundColor: `#${avatarInfo.color}` }; + } + }, [avatarInfo.color, avatarInfo.type]); + + const avatar = React.useMemo(() => { + if (avatarInfo.type === 'image') { + return ( + image avatar + ); + } + + return ( +
+
{avatarInfo.emoji}
+
+ ); + }, [ + avatarInfo.emoji, + avatarInfo.type, + avatarInfo.uri, + containerSizeClassName, + emojiContainerColorStyle, + emojiSizeClassName, + ]); + + return avatar; +} + +export default Avatar;