diff options
author | lonkaars <l.leblansch@gmail.com> | 2021-02-04 20:19:49 +0100 |
---|---|---|
committer | lonkaars <l.leblansch@gmail.com> | 2021-02-04 20:19:49 +0100 |
commit | 6de323e009a54f8416d6e99e2026ec9fbc2d8772 (patch) | |
tree | 1cde88ff7ac61e04d45abb225f231fe5b1524883 | |
parent | c709c98702c01b78b34c2e469825878dbb1f6029 (diff) |
new account avatar component
-rw-r--r-- | components/account.tsx | 29 |
1 files changed, 20 insertions, 9 deletions
diff --git a/components/account.tsx b/components/account.tsx index e6ec58f..3ebfbca 100644 --- a/components/account.tsx +++ b/components/account.tsx @@ -1,16 +1,27 @@ +import { Component } from "react"; + interface AccountAvatarProps { size: number; - image: string; + image?: string; + dummy?: boolean; + fallbackFill?: string; + round?: boolean; } -export function AccountAvatar(props: AccountAvatarProps) { - return <div style={{ - width: props.size, - height: props.size, - backgroundImage: props.image, - backgroundSize: "cover", - display: "inline-block" - }}/>; +export class AccountAvatar extends Component<AccountAvatarProps> { + render() { + var image = this.props.dummy ? + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/j/PwAHAQL/gXZXNQAAAABJRU5ErkJggg==)" : + this.props.image; + return <div style={{ + width: this.props.size, + height: this.props.size, + backgroundImage: image, + backgroundSize: "cover", + display: "inline-block", + borderRadius: this.props.size / 2 * Number(this.props.round) + }}/>; + } } |