diff options
author | fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com> | 2023-04-03 10:31:39 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-04-03 03:31:39 +0200 |
commit | 4520e6473afe901005e7ac532317f4b4f1af9ead (patch) | |
tree | 1ac8b7caa6c2ad0e565b99afaae3a46c0d9a77c7 /app/javascript/mastodon/components/avatar.tsx | |
parent | 2f7c3cb628ddf0438452325c52359f575aab6890 (diff) |
[Proposal] Make able to write React in Typescript (#16210)
Co-authored-by: berlysia <berlysia@gmail.com> Co-authored-by: fusagiko / takayamaki <takayamaki@users.noreply.github.com>
Diffstat (limited to 'app/javascript/mastodon/components/avatar.tsx')
-rw-r--r-- | app/javascript/mastodon/components/avatar.tsx | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/app/javascript/mastodon/components/avatar.tsx b/app/javascript/mastodon/components/avatar.tsx new file mode 100644 index 000000000..54ac611e6 --- /dev/null +++ b/app/javascript/mastodon/components/avatar.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import { autoPlayGif } from '../initial_state'; +import { useHovering } from '../../hooks/useHovering'; +import type { Account } from '../../types/resources'; + +type Props = { + account: Account; + size: number; + style?: React.CSSProperties; + inline?: boolean; + animate?: boolean; +} + +export const Avatar: React.FC<Props> = ({ + account, + animate = autoPlayGif, + size = 20, + inline = false, + style: styleFromParent, +}) => { + + const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate); + + const style = { + ...styleFromParent, + width: `${size}px`, + height: `${size}px`, + }; + + const src = (hovering || animate) ? account?.get('avatar') : account?.get('avatar_static'); + + return ( + <div className={classNames('account__avatar', { 'account__avatar-inline': inline })} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={style}> + {src && <img src={src} alt={account?.get('acct')} />} + </div> + ); +}; + +export default Avatar; |