about summary refs log tree commit diff
path: root/app/javascript/mastodon/components/avatar.tsx
diff options
context:
space:
mode:
authorfusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com>2023-04-03 10:31:39 +0900
committerGitHub <noreply@github.com>2023-04-03 03:31:39 +0200
commit4520e6473afe901005e7ac532317f4b4f1af9ead (patch)
tree1ac8b7caa6c2ad0e565b99afaae3a46c0d9a77c7 /app/javascript/mastodon/components/avatar.tsx
parent2f7c3cb628ddf0438452325c52359f575aab6890 (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.tsx40
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;